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


94

我有一个特定链接的单击处理程序,在其中要执行类似于以下操作:

window.location = url

我实际上需要在新窗口中打开URL,我该怎么做?

Answers:


204

您可以喜欢:

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

jQuery的:

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

您也可以将设置target_blank


但这个jQuery代码将无法浏览到目标自动
阿姆鲁Elgarhy

26
_blank是默认目标,因此使用window.open(url)就足够了
themerlinproject 2011年

不确定是否会有所帮助,并且不是完全相同的问题,但是我正在寻找相同的解决方案来下载文件(不是通过链接而是通过按钮),并且在Chrome上,打开窗口并没有下载,直到我简单地更改为window.location = 'url'不会改变位置,而是下载文件...
gdoumenc

window.open(url)很好:)
fudu

33

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

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

5
无需在点击处理程序中使用jQuery选择器,因此行$(this).attr('target', '_blank'); 可以更改为this.target = "_blank";此外,如果可以将页面上的锚点链接修改为具有rel="external"属性,则可以使用jQuery选择器为页面创建全局点击处理程序,a[rel="external"]而不用使用每个链接选择的点击处理程序与a#link_id
himanshu 2012年

17

5
kes!不要使用或链接到w3schools,它与W3C无关。请改用MDN:developer.mozilla.org/zh-CN/docs/Web/API/Window.open
AB Carroll 2014年

5
w3schools很好(忽略“很少”的w3c巨魔)...将继续成为权威来源...甚至w3c现在也再次支持它;-)
Dawesi

4

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

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

2

我刚刚找到了解决这个问题的有趣方法。我正在创建跨度,其中包含基于Web服务返回的信息。我考虑过尝试在跨度上放置一个链接,以便单击该链接时,“ a”将捕获点击。

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

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

然后,我将点击处理程序绑定到跨度,该跨度基于'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'));
});

这成功地使我单击了一个范围并打开了一个具有正确URL的新窗口。



1

此解决方案还考虑了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>


0

请注意,是否要在click事件的事件处理函数中执行AJAX请求。由于某些原因,Chrome(可能还有其他浏览器)将无法打开新的标签/窗口。


0

这不是一个很好的解决方法,但可以:

CSS:

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

HTML:

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

Javascript:

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

实时示例:http//jsfiddle.net/7eRLb/


0

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

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

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

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

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

  • _空白
  • _媒体
  • _父母
  • _搜索
  • _自
  • _最佳

检查此Microsoft网站


4
-1:尽管如此,您仍从stackoverflow.com/a/1462500/560648违反了许可证的复制/粘贴,但事实并非如此。这个论点支持的。它不能包含空格,破折号或其他标点符号。阅读有关该问题的其他答案和评论。
Lightness Races in Orbit 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.