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

时间:2010-05-13 14:38:00

标签: javascript jquery

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

window.location = url

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

10 个答案:

答案 0 :(得分:201)

你可以这样:

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

<强> jQuery的:

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

您也可以将target实际设置为_blank

答案 1 :(得分:33)

以下是如何在单击处理程序中强制执行目标:

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

答案 2 :(得分:17)

答案 3 :(得分:4)

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

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

答案 4 :(得分: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的新窗口。

答案 5 :(得分:1)

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

答案 6 :(得分:1)

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

&#13;
&#13;
$(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
    }
  });
}
&#13;
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 7 :(得分:0)

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

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

问题是window name。这将有效:

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

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

  • _blank
  • _media
  • _parent
  • _search
  • _self
  • _top

Check this Microsoft site

答案 8 :(得分:0)

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

答案 9 :(得分: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/