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

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

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

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

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

当前回答

window.open（url）将在一个新的浏览器选项卡中打开url。下面是替代它的JavaScript：

let a = document.createElement('a');
a.target = '_blank';
a.href = 'https://support.wwf.org.uk/';
a.click(); // We don't need to remove 'a' from the DOM, because we did not add it

这里是一个工作示例（StackOverflow片段不允许打开新选项卡）。

2020-01-02 14:33:02

其他回答

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

$.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

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

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

<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

如何创建一个<a>，其中_blank作为目标属性值，url作为href，样式显示：隐藏在a子元素中？然后添加到DOM，然后在子元素上触发单击事件。

更新

这行不通。浏览器会阻止默认行为。它可以通过编程方式触发，但不遵循默认行为。

自己检查一下：http://jsfiddle.net/4S4ET/

2014-04-11 19:27:35

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

在此页面中，打开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

有很多答案副本建议使用“_blank”作为目标，但我发现这并不奏效。正如Prakash指出的，这取决于浏览器。但是，您可以向浏览器提出某些建议，例如窗口是否应具有位置栏。

如果你提出了足够多的“类似标签的东西”，你可能会得到一个标签，正如Nico对铬的这个更具体问题的回答：

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

免责声明：这不是万能药。这仍然取决于用户和浏览器。现在，至少您为希望窗口的外观指定了一个首选项。

2020-08-13 12:09:52

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

推荐文章

最新文章

标签