JavaScript 在新窗口中打开，而不是选项卡

Posted 2023-02-22

【中文标题】JavaScript 在新窗口中打开，而不是选项卡

【英文标题】：JavaScript open in a new window, not tab

【发布时间】：2010-10-18 03:01:29

【问题描述】：

我有一个选择框，当一个项目被选中时调用window.open(url)。默认情况下，Firefox 将在新选项卡中打开该页面。但是，我希望页面在新窗口中打开，而不是在新选项卡中打开。

我怎样才能做到这一点？

【问题讨论】：

参见“jsfiddle.net/HLbLu”示例

Open a URL in a new tab using javascript的可能重复

你可以使用github.com/reduardo7/xpopup

【参考方案1】：

你不应该这样做。允许用户拥有他们想要的任何偏好。

默认情况下，Firefox 会这样做，因为在新窗口中打开页面很烦人，如果这不是用户想要的，则绝不应允许页面这样做。 （Firefox 确实允许您在新窗口中打开标签，如果您这样设置的话）。

【讨论】：

你错了。顺便说一句，说“你不应该这样做”是不恰当的，尤其是如果这是老板想要的东西

让我们尝试让 cmets 实用且有用。我们可以不同意而不是侮辱。

@theman_on_vista：说服你的老板是你的责任。贵公司已赋予您解决设计问题的责任。这包括指出错误的设计理念。

确实如此。屏幕属于用户，不属于其他任何人。

选择弹窗或标签是设计师的权利。虽然我是一个总是喜欢选项卡的用户，但我认识到有时，设计确实需要弹出窗口或确实需要选项卡。它应该在程序员的范围内使其成为可能。撇开哲学上的差异不谈，这种评论对于编程参考网站来说是完全不合适的。在这种情况下，它不是“我应该吗？”题。它是“我该怎么做？”

【参考方案2】：

我可能是错的，但据我了解，这是由用户的浏览器偏好控制的，我不相信这可以被覆盖。

【讨论】：

你是对的，用户可以将“about:config”首选项“browser.tabs.opentabfor.windowopen”设置为true，但这是一个全局设置，我不想更改全局我们用户浏览器的行为；）

我告诉过你我有可以工作的代码。我在萤火虫控制台中输入了这个： window.open("", "poop", "height=200,width=200,modal=yes,alwaysRaised=yes");你猜怎么着？？？它有效！！！！！！

是的，它可以工作，但这似乎有点不合时宜。 Firefox 的编写方式是，打开新窗口与选项卡是浏览器首选项，而不是 javascript 首选项。因此，您的建议在更高版本的 Firefox 中不会起作用是可行的。我宁愿不依赖黑客。

明确地说，我并不是说这是一个 javascript hack。添加窗口高度和宽度显然是 js window.open 方法的特征 (w3schools.com/htmlDOM/met_win_open.asp) 我的意思是在操纵 firefox 的预期行为的意义上进行 hack。

就其本身而言，我真的不会称其为 hack。你只是在你真正想要的行为上做出妥协，然后实施它。

【参考方案3】：

试试：

window.open("", [window name], "height=XXX,width=XXX,modal=yes,alwaysRaised=yes");

我有一些代码可以按照你说的做，但是里面有很多参数。我认为这些是最低限度的，如果它不起作用，请告诉我，我会发布其余的。

【讨论】：

这适用于 FF 31 和 Chrome 36，仅使用“modal=yes”选项。指定的所有选项也有效。我还在我的 FF 首选项中选中了“在新选项卡中打开新窗口”。如果没有打开选项，窗口将在新选项卡中打开。

经过更多测试后，似乎几乎所有参数（只要至少有一个）都会打开一个新窗口而不是选项卡。例如，“top=0”甚至可以在 FF 31 和 Chrome 36 中使用。这是在 OpenBSD 上使用 cwm 窗口管理器。所以结果可能会有所不同。

请问，[窗口名称] 是什么？

【参考方案4】：

为open 调用指定窗口“功能”：

window.open(url, windowName, "height=200,width=200");

当您指定宽度/高度时，它将在新窗口而不是选项卡中打开。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window.open#Position_and_size_features 了解所有可能的功能。

【讨论】：

好提示。我认为 Opera 仍然会在标签中打开它:)。

在 IE6、FF 3.6、Chrome 9.0 中工作

在 FF 11.0 中不再起作用，see my question！ @詹姆斯

在当今的浏览器中不起作用。默认情况下，它们都会在当前窗口的新选项卡中打开一个新窗口。它还取决于浏览器选项。您无法使用 JavaScript 对其进行控制。

这不是你在新窗口中打开“height=200,width=200”的事实。这只是放置额外参数（位置，状态等......没关系）的事实

【参考方案5】：

你不需要使用高度，只要确保你使用_blank，没有它，它会在一个新标签中打开。

对于空窗口：

window.open('', '_blank', 'toolbar=0,location=0,menubar=0');

对于特定的 URL：

window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');

【讨论】：

但是如果我也想给它起个名字呢？

至少在 Chrome 中，当从按钮或锚元素调用 JS 时，location=0 是必需的。

完美运行。在 Firefox 中也必须包含 location=0。

@nwbrad 你确定 '_blank' 部分，因为据我所知，当我们不指定任何其他值时，'_blank' 是默认值。在您的情况下，打开一个新窗口而不是新选项卡必须通过向 window.open 函数提供第三个参数来做一些事情。在您的情况下，它是“工具栏=0，位置=0，菜单栏=0”。您可以通过省略第三个参数并将 '_blank' 作为第二个参数来验证它。

在 Firefox 76 和 Internet Explorer 11 等现代浏览器中完美运行。提示是在参数中添加 location=0。我还建议命名窗口而不是使用_blank 目标，以便如果用户单击多次打开弹出窗口的元素并与focus() 链接，则再次使用相同的窗口，以便已经打开的弹出窗口获得焦点：window.open('http://***.com', 'Stack_Overflow','location=0').focus();

【参考方案6】：

您可以尝试以下功能：

<script type="text/javascript">
function open(url)

  var popup = window.open(url, "_blank", "width=200, height=200") ;
  popup.location = URL;

</script>

执行的 HTML 代码：

<a href="#" onclick="open('http://www.google.com')">google search</a>

【讨论】：

popup.location = URL; 的用途是什么？ window.open() 调用应将其打开到正确的 URL，并且在您的代码示例中，URL 未定义，因此它将回退到实验性（而不是广泛支持）URL object。虽然为此使用它值得商榷，但我很好奇在这里使用它的动机是什么？

可靠的答案并教我如何使该位置不可编辑。谢谢

【参考方案7】：

有趣的是，我发现如果你为 window.open 的第三个属性传入一个 empty 字符串（而不是空字符串或属性列表），它会以Chrome、Firefox 和 IE 的新标签页。如果不存在，则行为不同。

所以，这是我的新电话：

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

【讨论】：

原来的海报不是试图在新窗口中打开弹出窗口吗？此外，在 IE 11 中，您提供的代码 sn-p 将根据用户的浏览器偏好打开一个新窗口或选项卡。

【参考方案8】：

关键是参数：

如果您提供参数 [ Height="" , Width="" ] ，那么它将在新窗口中打开。

如果您不提供参数，那么它将在新标签页中打开。

在 Chrome 和 Firefox 中测试

【讨论】：

newwin = window.open('test.aspx', '', ''); 在 Chrome 中测试：26

【参考方案9】：

回复here。但再次发布以供参考。

window.open() 不会在新标签页中打开，如果它没有发生在实际的点击事件中。在给出的示例中，URL 是在实际点击事件中打开的。如果用户在浏览器中有适当的设置，这将起作用。

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function()
         window.open('www.yourdomain.com','_blank');
     );
</script>

同样，如果您尝试在 click 函数中执行 ajax 调用并希望在成功时打开一个窗口，请确保您正在使用 async : false 选项集进行 ajax 调用。

【参考方案10】：

试试那个方法.....

function popitup(url) 
       //alert(url);
       newwindow=window.open("http://www.zeeshanakhter.com","_blank","toolbar=yes,scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
       newwindow.moveTo(350,150);
   if (window.focus) 
          
             newwindow.focus()
          
   return false;
  

【参考方案11】：

我认为这不是 html 目标属性问题，但您在 firefox“选项”菜单下的“选项卡”选项卡中未选中“在新选项卡中打开 nw 窗口”选项。检查并重试。

【参考方案12】：

我也有同样的问题，但找到了一个相对简单的解决方案。

在 JavaScript 中，我正在检查 window.opener !=null; 以确定窗口是否为弹出窗口。如果您正在使用一些类似的检测代码来确定正在呈现您的站点的窗口是否是一个弹出窗口，您可以在想要打开一个 时轻松“关闭它”使用新窗口 JavaScript 的“新”窗口。

只需将它放在您希望始终作为“新”窗口的页面顶部。

<script type="text/javascript">
    window.opener=null;
</script>

我在我网站的登录页面上使用它，这样用户在使用弹出窗口导航到我的网站时不会出现弹出行为。

您甚至可以创建一个简单的重定向页面来执行此操作，然后移动到您提供的 URL。类似的，

父页面上的 JavaScript：

window.open("MyRedirect.html?URL="+URL, "_blank");

然后通过使用来自here 的一些 JavaScript，您可以获得 URL 并重定向到它。

重定向页面上的 JavaScript：

 <script type="text/javascript">
        window.opener=null;

    function getSearchParameters() 
          var prmstr = window.location.search.substr(1);
          return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : ;
    

    function transformToAssocArray( prmstr ) 
        var params = ;
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) 
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = tmparr[1];
        
        return params;
    

    var params = getSearchParameters();
    window.location = params.URL;
    </script>

【参考方案13】：

好的，经过大量测试，我的结论是：

当你表演时：

     window.open('www.yourdomain.tld','_blank');
     window.open('www.yourdomain.tld','myWindow');

或您在目标字段中输入的任何内容，这不会改变任何内容：新页面将在新选项卡中打开（因此取决于用户偏好）

如果你想在一个新的“真实”窗口中打开页面，你必须输入额外的参数。喜欢：

window.open('www.yourdomain.tld', 'mywindow','location=1,status=1,scrollbars=1, resizable=1, directories=1, toolbar=1, titlebar=1');

经过测试，您使用的额外参数似乎并不重要：这不是您放置“这个参数”或“另一个”创建新的“真实窗口”的事实，而是有新的事实参数。

但有些东西很困惑，可能会解释很多错误的答案：

这个：

 win1 = window.open('myurl1', 'ID_WIN');
 win2 = window.open('myurl2', 'ID_WIN', 'location=1,status=1,scrollbars=1');

还有这个：

 win2 = window.open('myurl2', 'ID_WIN', 'location=1,status=1,scrollbars=1');
 win1 = window.open('myurl1', 'ID_WIN');

不会给出相同的结果。

在第一种情况下，当您第一次打开一个没有额外参数的页面时，它将在一个新的标签中打开。在这种情况下，由于您提供的名称，第二个呼叫也将在此标签中打开。

在第二种情况下，当您的第一次调用带有额外参数时，页面将在一个新的“真实窗口”中打开。在这种情况下，即使第二次调用没有额外的参数，它也将在这个新的“真实窗口”中打开......但相同的选项卡！

这意味着第一次调用很重要，因为它决定了页面的放置位置。

【讨论】：

这个答案应该有很多++++

【参考方案14】：

我刚刚在 IE (11) 和 Chrome (54.0.2794.1 canary SyzyASan) 上试过这个：

window.open(url, "_blank", "x=y")

...它在一个新窗口中打开。

这意味着Clint pachl 说得对，他说提供任何一个参数都会导致新窗口打开。

-- 显然它不一定是合法参数！

（YMMV - 正如我所说，我只在两个地方进行了测试......下一次升级可能会使结果无效，无论如何）

ETA：不过，我刚刚注意到 - 在 IE 中，窗口没有任何装饰。

【参考方案15】：

对我来说，解决方案是拥有

"location=0"

在第三个参数中。在最新的 FF/Chrome 和旧版本的 IE11 上测试

我使用的完整方法调用如下（因为我喜欢使用可变宽度）：

window.open(url, "window" + id, 'toolbar=0,location=0,scrollbars=1,statusbar=1,menubar=0,resizable=1,width=' + width + ',height=800,left=100,top=50');