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


Answers:


456

给该窗口一个“ specs”参数,该参数具有width / height。有关所有可能的选项,请参见此处

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

指定宽度/高度时,它将在新窗口(而不是选项卡)中打开它。


5
好提示。我认为Opera仍然会在选项卡中打开它:)。
凯文·提格

7
在IE6,FF 3.6,Chrome 9.0中工作
James Westgate

3
在FF 11.0中不再起作用,请参阅我的问题!@James
TMS

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

3
这不是事实,您放置了“ height = 200,width = 200”,它将在新窗口中打开。这仅仅是添加额外参数(位置,状态等……无关紧要)的事实
彼得

110

您无需使用高度,只需确保使用即可_blank,如果没有使用高度,它将在新选项卡中打开。

对于空窗口:

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

对于特定的URL:

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

3
但是,如果我也想给它起个名字怎么办?
2014年

location=0从按钮或锚点元素调用JS时,至少在Chrome中是必需的。
Ohad Schneider 2014年

工作完美。在Firefox中也必须包含location = 0。
里克·詹姆斯

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

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

82

我可能是错的,但是据我了解,这是由用户的浏览器首选项控制的,我不认为这可以被覆盖。


1
没错,用户可以将“ about:config”首选项“ browser.tabs.opentabfor.windowopen”设置为true,但这是一个全局设置,我不想更改用户浏览器的全局行为;)
亚当

45
我告诉过你我的代码有效。我在firebug控制台中输入了以下内容:window.open(“”,“ poop”,“ height = 200,width = 200,modal = yes,alwaysRaised = yes”); 你猜怎么着???有用!!!!!!

24
是的,它可以工作,但这似乎有点不合常规。Firefox的编写方式是,打开新窗口vs标签是浏览器首选项,而不是javascript首选项。因此,可行的是,您的建议不会在更高版本的firefox中起作用。我宁愿不依靠黑客。
亚当

2
而且要明确一点,我并不是说这是一个JavaScript hack。添加窗口的高度和宽度显然是js window.open方法(w3schools.com/HTMLDOM/met_win_open.asp)的功能,我的意思是在操纵firefox预期行为的意义上讲hack。
亚当

2
就其本身而言,我真的不会称其为hack。您只是在折衷您实际想要的行为,而要实现它。
Matchu

15

尝试:

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窗口管理器。因此结果可能会有所不同。
Clint Pachl

我可以知道,[窗口名称]是什么?
pc's

10

好,经过大量测试,以下是我的结论:

执行时:

     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');

经过测试,似乎使用了额外的参数,这并不重要:这不是您放置“ this parameter”或“ this other”创建新的“ real window”的事实,而是存在一个新参数)。

但是有些东西很混乱,可能会解释很多错误的答案:

这个:

 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');

不会给出相同的结果。

在第一种情况下,首次打开没有额外参数的页面时,该页面将在新标签页中打开。在这种情况下,由于您输入的名称,第二个呼叫也将在此选项卡中打开。

在第二种情况下,由于您的第一次调用使用额外的参数,因此页面将在新的“ 真实窗口 ”中打开。在这种情况下,即使在没有额外参数的情况下进行第二次调用,也将在此新的“ 真实窗口 ”中打开它……但具有相同的选项卡!

这意味着第一次呼叫很重要,因为它决定了放置页面的位置。


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

9

您不需要。允许用户具有他们想要的任何首选项。

Firefox会默认执行此操作,因为在新窗口中打开页面很烦人,如果用户不希望这样做,则绝对不允许该页面这样做。(如果以这种方式设置,Firefox允许您在新窗口中打开选项卡)。


31
你错了。顺便说一句,说“你不需要”是不合适的,特别是如果老板想要的东西

8
让我们尝试使评论保持实用和有用。我们可以不侮辱而不同意。
亚当

17
@theman_on_vista:说服老板是您的责任。贵公司已赋予您解决设计问题的责任。这包括指出错误的设计思路。
EFraim 2010年

2
如此真实。屏幕属于用户,没有其他人。
Christopher Creutzig

12
选择弹出窗口或标签页是设计人员的职责。虽然我是一个总是偏爱标签的用户,但我意识到有时设计确实需要弹出窗口或确实需要标签。使其成为可能在程序员的范围内。撇开哲学上的差异,这种评论完全不适合编程参考站点。在这种情况下,这不是“应该吗?” 题。是“我怎么办?”
jbenet

9

您可以尝试以下功能:

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

2
目的是popup.location = URL;什么?该window.open()调用应将其打开到正确的URL,并且在您的代码示例中,URL未定义该调用,因此它将退回到实验性(且不受广泛支持)URL对象。虽然将其用于此尚有争议,但我很好奇在此使用它的动机是什么?
2014年

扎实的答案,并教我如何使位置不可编辑。谢谢
VirtualProdigy

6

关键是参数:

如果提供 参数[Height =“”,Width =“”],它将在新窗口中打开。

如果您不提供 Parameters,那么它将在新选项卡中打开。

在Chrome和Firefox中测试


1
newwin = window.open('test.aspx','',''); 在Chrome中测试:26
MuniR 2013年

5

有趣的是,我发现如果您为window.open的第三个属性传递一个字符串(而不是一个空字符串或属性列表),它将在Chrome,Firefox和IE的新标签页中打开。如果不存在,则行为会有所不同。

因此,这是我的新电话:

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

原始海报不是在尝试在新窗口中打开弹出窗口吗?另外,在IE 11中,您提供的代码段将根据用户的浏览器首选项打开一个新窗口或新标签页。

4

尝试那种方法.....

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;
  }

3

对我来说解决方案是

"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');

2

我刚刚使用IE(11)和Chrome(54.0.2794.1 canary SyzyASan)进行了尝试:

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

...,它在新窗口中打开。

这意味着克林特·帕克尔说正确的话时说提供任何一个参数都会导致新窗口打开。

-而且显然不必是合法参数!

(YMMV-正如我所说,我仅在两个地方进行了测试……下一次升级可能以任何方式使结果无效)

ETA:不过,我刚刚注意到-在IE中,窗口没有装饰。


1

在这里回答。但是再次发布以供参考。

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调用。


1

我认为它不是html目标属性问题,但是您在Firefox“选项”菜单下的“选项卡”选项卡中未选中“在新选项卡中打开nw窗口”。检查它,然后再试一次。

在此处输入图片说明


0

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

在JavaScript中,我正在检查window.opener !=null;以确定窗口是否为弹出窗口。如果您使用类似的检测代码来确定正在渲染您的网站的窗口是否弹出,当您想使用新的Windows JavaScript 打开“新”窗口时,可以轻松地“关闭”

只需将其放在页面顶部,您就希望始终成为“新”窗口。

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

我在网站的登录页面上使用此功能,因此,如果用户使用弹出窗口导航到我的网站,则不会出现弹出行为。

您甚至可以创建一个简单的重定向页面来执行此操作,然后移至您为其指定的URL。就像是,

父页面上的JavaScript:

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

然后,通过使用此处的一些JavaScript,您可以获取URL并重定向到该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>
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.