在新选项卡（而不是新窗口）中打开URL

我试图在一个新的选项卡中打开一个URL，而不是弹出窗口。

我见过一些相关的问题，其中的回答大致如下：

window.open(url,'_blank');
window.open(url);

但没有一个对我有效，浏览器仍然试图打开一个弹出窗口。

当前回答

为了阐述史蒂文·斯皮尔伯格的答案，我在这样一个案例中这样做了：

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

这样，就在浏览器跟随链接之前，我正在设置目标属性，因此它将在新的选项卡或窗口中打开链接（取决于用户的设置）。

jQuery中的一行示例：

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

这也可以通过使用本机浏览器DOM API来实现：

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

2011-04-05 15:02:17

其他回答

如果您试图从自定义功能打开新选项卡，则这与浏览器设置无关。

在此页面中，打开JavaScript控制台并键入：

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

它会尝试打开一个弹出窗口，而不管您的设置如何，因为“点击”来自自定义操作。

为了表现得像一个链接上的实际“鼠标点击”，您需要遵循spirinvradimir的建议并真正创建它：

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

这里有一个完整的示例（不要在jsFiddle或类似的在线编辑器上尝试，因为它不会让您从那里重定向到外部页面）：

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>

<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>

<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

2013-11-22 11:46:07

如果链接位于同一域（同一网站），浏览器将始终在新选项卡中打开该链接。如果链接在其他域上，它将在新的选项卡/窗口中打开，具体取决于浏览器设置。

因此，根据这一点，我们可以使用：

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

并添加一些jQuery代码：

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

所以，首先用_blank target在同一个网站上打开新窗口（它将在新选项卡中打开），然后在新窗口中打开您想要的网站。

2013-08-12 11:58:54

function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

2019-07-26 09:24:53

一个有趣的事实是，如果用户未调用该操作（单击按钮或其他东西），或者该操作是异步的，则无法打开新选项卡，例如，这将不会在新选项卡中打开：

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但这可能会在新选项卡中打开，具体取决于浏览器设置：

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

2013-10-18 12:35:27

我使用了以下方法，效果很好！

window.open(url, '_blank').focus();

2016-03-11 11:51:27

在新选项卡（而不是新窗口）中打开URL

推荐文章

最新文章

标签