Chrome,JavaScript,window.in在新标签页中打开


110

在chrome中,这会在新标签页中打开:

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

这会在新窗口中打开(但我也想在新标签页中打开它:

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

这可行吗?


2
您确定要确认什么吗?两个片段具有相同的结果。
DenysSéguret13年

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

Answers:


150

您不能直接控制它,因为它是由Internet Explorer用户控制的选项。

使用Window.open使用其他窗口名称打开页面将在新的浏览器窗口(如弹出窗口)中打开,或者在用户配置了浏览器的情况下在新选项卡中打开。

编辑:

更详细的解释:

1.在现代浏览器中,window.open将在新选项卡中打开,而不是弹出窗口。

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

3.如果window.open调用不是用户启动的事件的一部分,它将在新窗口中打开。

4. “用户启动的事件”不必具有相同的函数调用–但它必须起源于用户单击所调用的函数

5.如果用户启动的事件委托或推迟了函数调用(例如,在未绑定到click事件的事件侦听器或委托中,或通过使用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);

2
我只想通过在Chrome和FF中进行测试来添加它,我发现在您定义为“用户启动事件”的窗口中使用window.open保留了浏览器的默认操作。我的意思是,如果您在Chrome中按住Shift键并单击chrome,然后会出现一个新的浏览器窗口,如果您按住ctrl(或按鼠标中键),则会在后台打开一个新标签页。很好,您可以做一些事情而无需到处放置锚标记。
霍夫曼

3
“如果window.open调用不是用户启动的事件的一部分,它将在新窗口中打开。” 不,几乎可以肯定它根本不会打开。
TJ Crowder 2014年

3
自2014年9月29日起,最新的Firefox ESR和IE 11在js调用时使用_blank作为窗口名称在新窗口中打开_blank或window.open链接。当前的Chrome并不是那么简单。我测试了打开一个新窗口的过程,该窗口传递了顶部,左侧,宽度,高度,工具栏,位置,目录,状态,菜单栏,滚动条和可调整大小,并依次省略了每个窗口。Chrome会在新标签页中全部打开它们,但状态,菜单栏或滚动条除外。这似乎很武断,令人难以置信,但从经验上讲就是这样。此处的示例:jsbin.com/mobiyeqojaha/1
谜题

34

如果用户喜欢,强制使用选项卡有时会很有用。如上面的Prakash所述,有时这是由非用户启动的事件决定的,但是有一些解决方法。

例如:

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

将始终在新的浏览器窗口中打开“ newurl”,因为“始终”功能不被认为是用户启动的。但是,如果执行此操作:

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

我们将打开新的浏览器窗口或创建新的标签,具体取决于由用户启动的按钮点击中的用户偏好。然后,我们将位置从AJAX帖子返回后设置为所需的URL。瞧,如果用户喜欢,我们会强制使用标签。


我注意到,如果在window.open上的chrome中设置了一个断点,则浏览器会打开一个新窗口。让代码不中断似乎会导致打开一个新选项卡。
skinnybrit51 2014年

除非您的window.open和函数的结果需要5/6/7秒左右,否则这是一个好的解决方法。请考虑该功能是否正在将数据发布到生成PDF的服务器,该过程需要10秒钟。window.open向空白选项卡打开是立即的,用户凝视空白选项卡10秒钟,直到神奇地将其填充为止。仍然在iOS上,这是唯一的解决方案。
凯文·布朗


11

目前(Chrome 39),我使用以下代码打开新标签页:

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

当然,这可能会在将来的Chrome版本中发生变化。

如果您无法控制用户使用的浏览器,则使用此方法是个坏主意。它可能无法在将来的版本中或使用不同的设置。


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

我同意您的看法,如果您无法控制环境,那么依靠这样的解决方案是一个坏主意。但是在某些情况下,这是可能的(例如,我在其自己的便携式Chrome附带的应用程序中使用了它)。为了清楚起见,我编辑了分析器。
Nico Wiedemann 2014年

2
对于那些想知道的人,由于此错误而无法运行此代码段: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 2016年

6

这将在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请求之后),但随后浏览器将无法将其识别为用户启动的点击事件,并可能阻止弹出窗口。


1
$window只是AngularJS的使用方式window。您可以简单地使用window。更多信息:docs.angularjs.org/api/ng/service/$window
Magne


0

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

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

我从stackoverflow ..


1
这有效,但仅当您在用户单击处理程序中时才有效。否则,它将打开一个新窗口(但是Firefox至少会阻止您,直到用户允许为止)。
djsmith

@djsmith,我正在使用此..并且仅在IE7中面临问题。如果您有其他解决方案,请提出建议。.谢谢..
Dilip Rajkumar,2013年

-2

我使用的最佳方式:

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函数

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.