Javascript 如何在新窗口中打开链接?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2827637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:05:20  来源:igfitidea点击:

How can I open a link in a new window?

javascriptjquery

提问by Chris

I have a click handler for a specific link, inside that I want to do something similar to the following:

我有一个特定链接的点击处理程序,在里面我想做类似于以下的事情:

window.location = url

I need this to actually open the url in a new window though, how do I do this?

我需要这个才能在新窗口中实际打开网址,我该怎么做?

回答by Sarfraz

You can like:

你可以喜欢:

window.open('url', 'window name', 'window settings')

jQuery:

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

You could also set the targetto _blankactually.

您也可以将 设置target_blank实际。

回答by chadwackerman

Here's how to force the target inside a click handler:

以下是在点击处理程序中强制目标的方法:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});

回答by Usha

You can also use the jquery prop() method for this.

您也可以为此使用 jquery prop() 方法。

$(function(){
  $('yourselector').prop('target', '_blank');
}); 

回答by Dramoth

I just found an interesting solution to this issue. I was creating spans which contain information based on the return from a web service. I thought about trying to put a link around the span so that if I clicked on it, the "a" would capture the click.

我刚刚找到了一个有趣的解决方案。我正在创建包含基于 Web 服务返回信息的跨度。我想尝试在跨度周围放置一个链接,这样如果我点击它,“a”就会捕获点击。

But I was trying to capture the click with the span... so I thought why not do this when I created the span.

但是我试图用跨度捕捉点击......所以我想为什么在创建跨度时不这样做。

var span = $('<span id="something" data-href="'+url+'" />');

I then bound a click handler to the span which created a link based on the 'data-href' attribute:

然后我将一个点击处理程序绑定到基于“data-href”属性创建链接的跨度:

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

This successfully allowed me to click on a span and open a new window with a proper url.

这成功地允许我点击一个跨度并打开一个带有正确 url 的新窗口。

回答by Michaja Broertjes

What's wrong with <a href="myurl.html" target="_blank">My Link</a>? No Javascript needed...

怎么了<a href="myurl.html" target="_blank">My Link</a>?不需要Javascript...

回答by u1230329

this solution also considered the case that url is empty and disabled(gray) the empty link.

此解决方案还考虑了 url 为空且禁用(灰色)空链接的情况。

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

回答by dhanesh s.r

Microsoft IE does not support a name as second argument.

Microsoft IE 不支持名称作为第二个参数。

window.open('url', 'window name', 'window settings');

Problem is window name. This will work:

问题是window name。这将起作用:

window.open('url', '', 'window settings')

Microsoft only allows the following arguments, If using that argument at all:

Microsoft 只允许以下参数,如果完全使用该参数:

  • _blank
  • _media
  • _parent
  • _search
  • _self
  • _top
  • _空白的
  • _媒体
  • _父母
  • _搜索
  • _自己
  • _最佳

Check this Microsoft site

检查此 Microsoft 站点

回答by user2618825

Be aware if you want to execute AJAX requestsinside the event handler function for the click event. For some reason Chrome (and maybe other browsers) will not open a new tab/window.

请注意是否要在单击事件的事件处理函数中执行 AJAX 请求。出于某种原因,Chrome(可能还有其他浏览器)不会打开新标签/窗口。

回答by adriandorin

This is not a very nice fix but it works:

这不是一个很好的修复,但它有效:

CSS:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Live example: http://jsfiddle.net/7eRLb/

现场示例:http: //jsfiddle.net/7eRLb/