【问题标题】:Chrome, Javascript, window.open in new tabChrome, Javascript, window.open in new tab
【发布时间】:2013-03-26 23:32:37
【问题描述】:

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

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

这将在新窗口中打开(但我也希望它在新选项卡中打开:

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

这可行吗?

【问题讨论】:

  • 您确定您所确认的内容吗?两个片段的结果相同。
  • 在选项卡中打开窗口还是在新窗口中打开取决于本地浏览器以及用户如何配置其浏览器 - 这不是您可以在 javascript 中指定的。

标签: javascript window.open


【解决方案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);

【讨论】:

  • 我只是想通过在 Chrome 和 FF 中进行测试来补充一点,我发现在您定义为“用户启动事件”的情况下使用 window.open 可以保持浏览器的默认操作。我的意思是,如果在 Chrome 中按住 shift 键并单击一个新的浏览器窗口,则会出现一个新的浏览器窗口,如果您按住 ctrl(或按鼠标中键),则会在后台打开一个新选项卡。非常好,你可以做一些东西而不需要到处放置锚标签。
  • “如果 window.open 调用不是用户启动事件的一部分,它将在新窗口中打开。” 不,几乎可以肯定不会完全打开。
  • 截至 2014 年 9 月 29 日,最新的 Firefox ESR 和 IE 11 在 js 调用使用 _blank 作为窗口名称时,在新窗口中打开 _blank 或 window.open 链接。当前的 Chrome 并不是那么简单。我测试了打开一个新窗口,传递顶部、左侧、宽度、高度、工具栏、位置、目录、状态、菜单栏、滚动条和可调整大小,并依次省略每一个。 Chrome 在新选项卡中将它们全部打开,除非省略了状态、菜单栏或滚动条。这看起来如此武断,令人难以置信,但从经验上看,情况就是这样。此处示例:jsbin.com/mobiyeqojaha/1
【解决方案2】:

如果用户喜欢,强制使用选项卡有时很有用。正如上面 Prakash 所说,这有时是由使用非用户发起的事件决定的,但有一些方法可以解决这个问题。

例如:

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

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

$("#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 中设置了断点,那么浏览器会打开一个新窗口。让代码不中断似乎会导致打开一个新选项卡。
  • 这是一个好的解决方法,除非你的 window.open 并且函数的结果需要 5/6/7 秒左右。考虑该函数是否将数据发布到生成 PDF 的服务器,这需要 10 秒。 window.open 到空白选项卡是立即的,用户盯着空白选项卡 10 秒钟,直到它神奇地被填充。仍然在 iOS 上,它是唯一的解决方案。
【解决方案3】:

如果您使用 window.open(url, '_blank') ,它将在 Chrome、Firefox 等上被阻止(弹出窗口阻止程序)

试试这个,

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

为这个http://jsfiddle.net/safeeronline/70kdacL4/2/工作的js小提琴

打开 ajax 窗口的工作 js fiddle http://jsfiddle.net/safeeronline/70kdacL4/1/

【讨论】:

    【解决方案4】:

    目前(Chrome 39)我使用此代码打开一个新标签:

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

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

    如果您无法控制用户正在使用的浏览器,那么使用它是个坏主意。它可能不适用于未来的版本或不同的设置。

    【讨论】:

    • 根据 jfriend00 的评论,用户配置浏览器的方式决定了新窗口的打开方式,而不是代码。
    • 我同意你的观点,如果你不能控制你的环境,那么依赖这样的解决方案是个坏主意。但是在某些情况下这是可能的(例如,我在带有自己的便携式 Chrome 的应用程序中使用它)。为了说明这一点,我编辑了我的分析器。
    • 对于那些想知道,运行此代码 sn-p 由于此错误而无法工作的人: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.
    【解决方案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';
    

    它基本上是打开一个新的空选项卡,然后设置该空选项卡的位置。请注意,这是一种 hack,因为浏览器选项卡/窗口行为实际上是浏览器和用户的领域、责任和选择。

    可以在回调中调用第二行(例如,在您完成一些 AJAX 请求之后),但是浏览器不会将其识别为用户发起的点击事件,并且可能会阻止弹出窗口。

    【讨论】:

    【解决方案6】:

    清除迷你解决方案$('&lt;form action="http://samedomainurl.com/" target="_blank"&gt;&lt;/form&gt;').submit()

    【讨论】:

      【解决方案7】:

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

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

      我从stackoverflow..得到它。

      【讨论】:

      • 这有效,但前提是您在用户点击处理程序中。否则,它会打开一个新窗口(但 Firefox 至少会阻止你,直到用户允许它)。
      • @djsmith,我正在使用这个.. 并且仅在 IE7 中遇到问题。如果您有任何其他解决方案,请提出..谢谢..
      【解决方案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 函数

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-10-24
        • 1970-01-01
        • 2017-10-26
        • 2020-08-08
        • 2011-10-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多