Chrome中如何使用Javascript打开新标签页的window.open方法？

Question

在Chrome浏览器中，这将在新的标签页中打开：

<button onclick="window.open('newpage.html', '_blank')" />

这会在新窗口打开（但我还希望它在新标签页中打开：

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

这个可行吗？

- Andrew

---

你确定你所断言的吗？这两个片段的结果是相同的。 - Denys Séguret

无论窗口是在选项卡中打开还是在新窗口中打开，取决于本地浏览器以及用户如何配置其浏览器 - 这不是您可以在JavaScript中指定的内容。 - jfriend00

Answer 1

由于这是一个由Internet Explorer用户控制的选项，因此您无法直接控制它。

使用不同的窗口名称使用Window.open打开页面将在新的浏览器窗口中打开，如弹出窗口，或者在用户配置浏览器以这样做的情况下，在新选项卡中打开。

编辑:

更详细的解释：

1. 在现代浏览器中，window.open将在新标签页中打开，而不是弹出窗口。

2. 您可以通过在第三个参数中指定选项来强制浏览器使用新窗口（“弹出”）。

3. 如果window.open调用不是用户发起的事件的一部分，则会在新窗口中打开。

4. “用户发起的事件”不必是相同的函数调用——但它必须起源于由用户点击调用的函数中

5. 如果用户发起的事件委托或推迟了函数调用（例如，在事件侦听器或未绑定到单击事件的委托中，或使用setTimeout），它将失去其“用户发起”的状态

6. 一些弹出窗口拦截程序将允许从用户发起的事件中打开的窗口，但不允许以其他方式打开的窗口。

7. 如果任何弹出窗口被阻止，那些通常由拦截程序允许的弹出窗口（通过用户发起的事件）有时也会被阻止。 以下是一些示例...

将窗口强制打开在一个新的浏览器实例中，而不是新的选项卡中：

window.open('page.php', '', 'width=1000');

以下内容将被视为用户启动的事件，即使它调用另一个函数：

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

以下事件不符合用户启动事件的资格，因为setTimeout会将其推迟：

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);

- Prakash Chennupati

---

我想补充一下，在Chrome和FF中进行测试后，我发现在所定义的“用户启动事件”中使用window.open可以保留浏览器的默认操作。我的意思是，如果在Chrome中按住shift并单击，将出现一个新的浏览器窗口，如果按住ctrl（或按下中间鼠标按钮），则会在后台打开一个新的选项卡。这非常好，您可以做一些事情而不需要在各处放置锚标记。 - Hoffmann

如果 window.open 调用不是用户发起的事件的一部分，它将在新窗口中打开。不，几乎肯定不会被打开。 - T.J. Crowder

截至2014年9月29日，最新的Firefox ESR和IE 11在js调用使用_blank作为窗口名称时，会在新窗口中打开_blank或window.open链接。然而当前版本的Chrome并非如此简单。我测试了通过传递top、left、width、height、toolbar、location、directories、status、menubar、scrollbars和resizable来打开一个新窗口，并依次省略每个参数。Chrome会在新选项卡中打开所有这些参数，除非省略了status、menubar或scrollbars中的任何一个。这看起来很武断，但实际上就是这样。示例在这里：http://jsbin.com/mobiyeqojaha/1 - enigment

Answer 2

有时候，如果用户喜欢使用标签，强制使用标签是很有用的。正如Prakash在上面所述的那样，有时这是由于非用户发起事件的使用而被规定下来的，但也有办法解决这个问题。

例如：

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

由于“always”功能不被视为用户启动，因此将始终在新的浏览器窗口中打开“newurl”。但是，如果我们这样做：

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

我们根据用户的偏好，在按钮点击时打开新的浏览器窗口或创建新的标签页，这是由用户主动发起的。然后在从 AJAX post 返回后，将位置设置为所需的 URL。如果用户喜欢，我们就强制使用标签页。

- Frank A Tinker

---

我注意到，如果你在chrome浏览器中设置了一个window.open的断点，那么浏览器会打开一个新窗口。让代码不中断似乎会导致打开一个新标签页。 - skinnybrit51

这是一个可以接受的解决方法，除非你的window.open和函数的结果需要大约5/6/7秒钟。考虑一下，如果该函数正在向生成需要10秒钟的PDF的服务器提交数据。打开一个空标签页是立即完成的，用户会盯着空白标签页看10秒钟，直到它神奇地被填充。在iOS上，这仍然是唯一的解决方案。 - Kevin Brown

Answer 3

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

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

这个是用于展示工作的js fiddle：http://jsfiddle.net/safeeronline/70kdacL4/2/

这个是用于ajax窗口打开的工作的js fiddle：http://jsfiddle.net/safeeronline/70kdacL4/1/

- Mohammed Safeer

---

现在Chrome将显示"google.com被阻止连接。ERR_BLOCKED_BY_RESPONSE" - mikemaccana

Answer 4

目前（Chrome 39），我使用以下代码打开一个新标签页：

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

当然，这可能会在Chrome的未来版本中更改。

如果您无法控制用户使用的浏览器，则使用此功能是一个不好的主意。它可能在将来的版本或不同设置下无法正常工作。

- Nico Wiedemann

---

根据jfriend00的评论，用户配置浏览器的方式决定了如何打开新窗口，而不是代码。 - Lee Taylor

我同意你的看法，如果你无法控制环境，依赖这样的解决方案是个坏主意。但是在某些情况下这是可能的（例如我在一个带有自己的便携式 Chrome 的应用程序中使用它）。为了明确这一点，我编辑了我的回答。 - Nico Wiedemann

对于那些好奇的人，运行此代码片段会失败并显示如下错误：VM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. - Benjamin Crouzier

Answer 5

这将在Chrome和Firefox中以新标签页打开链接，可能还有其他我没有测试过的浏览器：

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

它基本上打开一个新的空标签页，然后设置该空标签页的位置。请注意，这是一种类似于黑客行为的操作，因为浏览器标签/窗口行为实际上归属于浏览器和用户的领域、责任和选择。

第二行可以在回调函数中调用（例如在进行了某些 AJAX 请求之后），但是浏览器不会将其视为用户启动的点击事件，并可能阻止弹出窗口。

- Magne

---

$window只是AngularJS使用window的方式而已。你可以直接使用window。更多信息请参考：https://docs.angularjs.org/api/ng/service/$window - Magne

Answer 6

清除小型解决方案 $ ('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()

- Serhii Matrunchyk

Answer 7

您可以使用此代码在新标签页中打开。

function openWindow( url )
{
  window.open(url, '_blank');
  window.focus();
}

我从stackoverflow上得到了它。

- Dilip Rajkumar

---

这个代码可以工作，但是仅限于用户点击处理程序中。否则，它会打开一个新窗口（但至少在Firefox浏览器中，直到用户允许之前，它会被阻止）。 - djsmith

@djsmith，我正在使用这个..但只有在IE7中出现问题。如果您有其他解决方案，请建议一下..谢谢。 - Dilip Rajkumar

Answer 8

我使用的最佳方式：

1- 添加链接到你的HTML中：

<a id="linkDynamic" target="_blank" href="#"></a>

2- 添加 JS 函数：

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3- 只需调用OpenNewTab函数并传入您想要的链接即可

- Mohammad Shraim