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

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

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

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


当前回答

(function(a) {
    document.body.appendChild(a);
    a.setAttribute('href', location.href);
    a.dispatchEvent((function(e) {
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
        return e
    }(document.createEvent('MouseEvents'))))
}(document.createElement('a')))

其他回答

这对我有效。只需阻止事件,将URL添加到<a>标记,然后在该标记上触发单击事件。

JavaScript

$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href', "http://someurl.com");
        $(this).trigger('click');
});

HTML

<a href="#" class="myBtn" target="_blank">Go</a>

这可能是一个黑客,但在Firefox中,如果您指定第三个参数“fullscreen=yes”,它会打开一个新的窗口。

例如

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

它似乎实际上覆盖了浏览器设置。

浏览器在处理window.open时有不同的行为

您不能期望所有浏览器的行为都相同。window.open不能可靠地跨浏览器打开新选项卡上的弹出窗口,而且它还取决于用户的偏好。

例如,在Internet Explorer(11)上,用户可以选择在新窗口或新选项卡中打开弹出窗口,但不能强制Internet Explorer 11通过window.open以某种方式打开弹出窗口。

对于Firefox(29),window.open(url,'_blank')的行为取决于浏览器的选项卡首选项,尽管您仍然可以通过指定宽度和高度强制其在弹出窗口中打开url(请参阅下面的“Chrome”部分)。

Internet Explorer(11)

您可以将Internet Explorer设置为在新窗口中打开弹出窗口:

完成后,尝试运行window.open(url)和window.open(url,'_blank')。观察页面在新窗口中打开,而不是在新选项卡中打开。

Firefox(29)

您还可以设置选项卡首选项以打开新窗口,并看到相同的结果。

看起来Chrome(版本34)没有任何设置来选择在新窗口或新选项卡中打开弹出窗口。不过,在这个问题中讨论了一些方法(编辑注册表)。

在Chrome和Firefox中,即使用户将Firefox设置为在新选项卡中打开新窗口,指定宽度和高度也会强制弹出窗口(如这里的答案所述)

let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')

然而,在Internet Explorer 11中,如果在浏览器首选项中选择了选项卡,则相同的代码将始终在新选项卡中打开链接,指定宽度和高度不会强制弹出新窗口。

在Chrome中,当在onclick事件中使用window.open时,它似乎会打开一个新的选项卡,当在浏览器控制台中使用它时,它会打开新的窗口(正如其他人所指出的),当指定了宽度和高度时,弹出窗口会打开。


附加阅读:window.open文档。

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

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

要打开新选项卡并保持在同一位置,可以在新选项卡中打开当前页面,然后将旧选项卡重定向到新URL。

let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL

浏览器将自动将您移动到新打开的选项卡。看起来您的页面已重新加载,您将停留在同一页面上,但在新窗口上: