题 使用JavaScript在新选项卡(而不是新窗口)中打开URL


我正试图打开一个 网址 在新选项卡中,而不是弹出窗口。我已经看到相关的问题,其中的回答看起来像:

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

但是它们都没有为我工作,浏览器仍然试图打开一个弹出窗口。


1594
2018-02-05 15:52


起源


这通常是一个偏好问题。有些人喜欢windows(并且狠狠地保护这种行为),一些标签(以及强烈保护这种行为)。所以你会打败一种通常被认为是品味而不是设计的行为。 - Jared Farrish
Javascript对您的浏览器和选项卡与Windows无关,因此浏览器决定如何打开新窗口。 - Andrey
如何配置Chrome以在新选项卡中显示它,而不是弹出窗口? - Mark F
Gmail会以某种方式执行此操作,至少在Chrome中是这样。按住Shift并单击电子邮件行,然后在新窗口中打开该电子邮件。按Ctrl +单击,然后在新选项卡中打开它。唯一的问题:挖掘到gmail的混淆代码就是PITA - Sergio
@Sergio,这是任何链接的默认浏览器行为。 (至少适用于Chrome和Firefox。)与Gmail无关。 - Qtax


答案:


作者无法做的任何事情都可以选择在新选项卡中打开而不是在新窗口中打开。它是一个 用户偏好

CSS3提出 目标新但是 规范被放弃了

相反 不是真的;通过在第三个参数中指定窗口的尺寸 window.open,当首选项用于制表符时,您可以触发新窗口。


699
2018-02-05 15:53



@JacksonGariety - 如何覆盖窗口或标签的浏览器首选项? - Quentin
@AliHaideri Javascript与新标签/窗口的打开方式无关。这完全取决于您的浏览器设置。运用 window.open 告诉浏览器打开新内容,然后浏览器打开在其设置中选择的内容 - 选项卡或窗口。在您测试的浏览器中,将设置更改为在新窗口而不是选项卡中打开,您将看到其他人的解决方案是错误的。 - Ian
浪费别人的时间而不是告诉他们某件事的两件事是无法做到的。 (1)告诉他们一些无法做到的事情 能够 做完了。 (2)保持沉默,让他们一直在寻找一种无法做到的事情的方法。 - Quentin
@Cupcake - 文档通常不打算描述不存在的功能。 evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/... - Quentin
@Neel - 因为它简明扼要地谈到了许多人想要了解的话题。 - Quentin


这是一招,

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

在大多数情况下,这应该直接发生在 onclick 用于阻止弹出窗口阻止程序的链接的处理程序,以及默认的“新窗口”行为。你可以这样做,或者通过添加一个事件监听器 DOM 目的。

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript-196/


1263
2017-07-08 14:49



不起作用。在地址栏右侧收到消息: 弹出窗口被阻止。然后我允许弹出窗口。而且,它在弹出窗口打开,而不是打开 标签! OS X Lion上的Chrome 22.0.1229.94。 - nalply
我认为这么多人遇到问题的原因是因为他们没有正确实现它(虽然我看不出如何。)在vanilla中测试过:Chrome,IE,FF,SeaMonkey,Safari和Opera。奇迹般有效。 - b1nary.atr0phy
@Dhaval更改浏览器中的设置。是否在标签页或窗口中打开是由浏览器的设置决定的。通过打电话你无能为力 window.open (或任何Javascript)选择 怎么样 打开新窗口/选项卡。 - Ian
@ b1naryatr0phy那是因为你没有真正测试它。更改浏览器中的设置。是否在标签页或窗口中打开是由浏览器的设置决定的。通过调用window.open(或任何Javascript)来选择如何打开新窗口/选项卡,您无能为力。 - Ian
@duke你能提供一个浏览器的例子吗,在这个浏览器中使用OP的代码,新页面会在新窗口中打开,而在你的新窗​​口中,它会打开吗?到目前为止,你没有提供 任何 这个代码工作的例子,其他人提供了很多(他们声称)它失败了。 - Mark Amery


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 选项集。


316
2017-10-31 13:15



将这个标记为正确的答案会很高兴。我使用Chrome v26(Windows)进行的测试确认,如果代码位于按钮的单击处理程序中,则会打开一个新选项卡,如果以编程方式调用代码,例如从控制台,然后它打开一个新窗口。 - CyberFonic
@Cyber​​Fonic没有理由这样做,因为这不是正确的答案。它不确定如何打开新选项卡/浏览器。你无法通过Javascript控制它。这取决于您的浏览器设置。 - Ian
@PaulBrown这个答案与其他答案没有什么不同。他们都说要用 window.open。第二个参数是“_blank”并没有改变任何东西。因此这里没有区别。事实上他们声称“window.open() 如果在实际点击事件中没有发生,则不会在新标签中打开。“也是错误的。浏览器中的设置是发生任何事情的原因,而不是Javascript代码 - Ian
@PaulBrown我不知道为什么你不接受你无法控制它的事实。所有Cyber​​Fonic都解释/证明它是浏览器之间的另一个不一致,并表明不安全 window.open 呼叫与安全呼叫不同。在内部。我刚刚在Firefox和IE上测试了同样的东西,并且都在新标签中打开。这是一个例子,所以你可以测试你的小心脏: jsfiddle.net/gEuMK 。为什么你认可一个在浏览器之间不一致的解决方案,只在一个上“工作”,即使你无法控制哪个发生 - 一个真实的,安全的事件或一个随机/不安全的事件? - Ian
@PaulBrown不,它没有。有 没有 保证选项卡将打开(从Javascript的角度来看)。标签为我打开,因为我的浏览器的默认设置是在选项卡中打开。它适用于您和其他人,因为您的默认设置可能相同。问题是“如何在新标签中打开URL”。这个以及所有其他代码问题都回答“如何根据浏览器的默认设置打开URL”。对我来说,OP 希望 完全控制。如果他们想要发生某些事情,答案应该是 使 它发生了。这些答案 威力 实现它 - Ian


window.open 无法在所有浏览器的新选项卡中可靠地打开弹出窗口

不同的浏览器实现的行为  window.open  以不同的方式,特别是关于用户的浏览器偏好。 你不能指望相同的行为 window.open 在所有Internet Explorer,Firefox和Chrome中都是如此,因为它们处理用户浏览器首选项的方式不同。

例如,Internet Explorer(11)用户可以选择在新窗口或新选项卡中打开弹出窗口, 您无法强制Internet Explorer 11用户以某种方式打开弹出窗口  window.open,如提到的那样 昆汀的回答

至于Firefox(29)用户,使用 window.open(url, '_blank')  取决于他们的浏览器选项卡首选项, 虽然您仍然可以通过指定宽度和高度强制它们在新窗口中打开弹出窗口(请参阅下面的“关于Chrome的内容?”部分)。

示范

转到浏览器的设置并将其配置为在新窗口中打开弹出窗口。

Internet Explorer(11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

测试页面

如上所示,在设置Internet Explorer(11)以在新窗口中打开弹出窗口后,使用以下测试页面进行测试 window.open

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

观察弹出窗口是否已打开 在新窗口中,而不是新选项卡。

您还可以在Firefox(29)中测试上面的代码段,并将其选项卡首选项设置为新窗口,并查看相同的结果。

Chrome怎么样?它实现 window.open 与Internet Explorer(11)和Firefox(29)不同。

我不是百分百肯定,但它看起来像Chrome(版本 34.0.1847.131 m)似乎没有任何设置,用户可以使用它来选择是否在新窗口或新选项卡(如Firefox和Internet Explorer)中打开弹出窗口。我检查了 用于管理弹出式窗口的Chrome文档,但它没有提到任何关于那种事情。

也, 再次,不同的浏览器似乎实现了行为  window.open  不同。 在Chrome和Firefox中, 指定宽度和高度将强制弹出, 即使用户已设置Firefox(29)以在新选项卡中打开新窗口(如答案中所述) JavaScript在新窗口中打开,而不是制表符):

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

但是,上面的代码片段相同 如果用户将标签设置为浏览器首选项,则将始终在Internet Explorer 11中打开新标签, 甚至没有指定宽度和高度将强制为它们弹出一个新窗口。

所以的行为 window.open 在Chrome中使用时似乎是在新标签页中打开弹出窗口 onclick 事件,从浏览器控制台使用时在新窗口中打开它们(正如其他人所说),并在指定宽度和高度时在新窗口中打开它们。

概要

不同的浏览器实现的行为  window.open  不同之处在于用户的浏览器偏好。 你不能指望相同的行为 window.open 在所有Internet Explorer,Firefox和Chrome中都是如此,因为它们处理用户浏览器首选项的方式不同。

补充阅读


224
2018-05-01 19:42



你没有回答这个问题,你刚才证明window.open是不一致的。 - BentOnCoding


一个班轮:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

要么

jQuery的 我正在使用这个:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

它创造了一个虚拟的 a 元素,给它 target="_blank" 所以它在新标签中打开,给它正确 url  href 然后单击它。

如果你愿意,基于此你可以创建一些功能:

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

然后你可以使用它像:

openInNewTab("http://google.com");

为一个 非jQuery的 方案,该函数将如下所示:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

136
2018-02-06 20:35



谢谢。你的纯JS有一个缺失的部分 - 正如Luke Alderton所写的那样(见下文),你需要将创建的元素附加到文档正文,在你的代码中它至少在Firefox 37中挂起它至少在Firefox 37中没有做任何事情。 - greenoldman
@mcginniwa这样的任何动作 - 如果没有像鼠标点击这样的用户动作触发,将会弹出popup-blocker。想象一下,您可以在没有用户操作的情况下使用Javascript打开任何URL - 这将非常危险。如果你把这个代码放在像click函数这样的事件中 - 它会正常工作 - 这与所有提出的解决方案相同。 - pie6k
这是我的第一个念头。我认为可能最好考虑弹出窗口拦截器。 - Arg0n
您可以按如下方式简化代码: $('<a />',{'href': url, 'target', '_blank'}).get(0).click(); - shaedrich
@shaedrich的灵感来自你的剪辑我添加了非jquery one-liner: Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click(); - pie6k


为了详细说明斯蒂芬斯皮尔伯格的答案,我在这种情况下这样做了:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

这样,就在浏览器将跟随我设置目标属性的链接之前,所以它将在新的选项卡或窗口中打开链接(取决于用户的设置)。


55
2018-04-05 15:02





如果你使用 window.open(url, '_blank'),它将在Chrome上被阻止(弹出窗口拦截器)。

尝试这个:

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

51
2018-05-28 16:43



这正是我期望看到的接受答案,是否有理由不使用此选项?我测试了Chrome,Safari和IE11,它在这些浏览器中运行良好,但不了解移动和LTE(IE10) - cloying
这可能会在新窗口中打开。这可能会在新标签中打开。它不受网站作者的控制。此代码与OP所说的问题中的代码相同。 - Quentin
谢谢它工作正常,但需要浏览器设置来处理弹出窗口.. - chetan
我真的认为这可能是一个很好的解决方案,因为它按预期工作打开一个新选项卡,即使打开广告拦截器或弹出窗口阻止程序也很有效 - LucioB
这不适用于FF和chrome。 - Faisal Mq


我使用以下,它运作良好!

window.open(url, '_blank').focus();

29
2018-03-11 11:51



导致弹出窗口阻止程序出现
-1。这是错的。打电话给 .focus() 不会影响是否在窗口或选项卡中打开新页面,因为它发生在窗口或选项卡之后 .open() 打电话,和 window.open(url, '_blank') 字面意思是 确切地问题提供者包含在问题中的代码 他和这里的许多其他海报所解释的并不奏效。 - Mark Amery
不可以。根据用户的偏好,可以在新标签页或新窗口中打开。问题是询问如何确保它在新选项卡中打开而不是在新窗口中打开。 - Quentin


一个有趣的事实是,如果用户未调用操作(单击按钮或某物)或者它是异步的,则无法打开新选项卡,例如,这不会在新选项卡中打开:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但这可能会在新选项卡中打开,具体取决于浏览器设置:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

14
2017-10-18 12:35



发现这很有用,所以至少有些浏览器(使用默认设置)会在没有弹出窗口阻止程序警告的情况下打开选项卡。 - Populus
这在Firefox 28,Chrome 34b和Safari 7.0.2中作为弹出窗口被阻止,所有库存设置。 :( - Steve Meisner
+1这正是我的问题async:false有帮助,但它很危险 - Mina Gabriel
这有解决方法吗? - Struggler
“如果用户未调用操作(单击按钮或其他内容)或者它是异步的,则无法打开新选项卡”  - 适用于Chrome,但并非适用于所有浏览器。保存 <script>open('http://google.com')</script> 到了 .html 文件,并在最新版本的Firefox的全新安装中打开它;你会发现Firefox很乐意在一个新标签中打开谷歌(可能在你告诉它允许弹出窗口之后),而不是一个新窗口。 - Mark Amery


我认为你无法控制这一点。如果用户已将浏览器设置为在新窗口中打开链接,则无法强制此操作在新选项卡中打开链接。

JavaScript在新窗口中打开,而不是制表符


13
2018-02-05 15:55





省略[strWindowFeatures]参数将打开一个新选项卡,除非浏览器设置覆盖(浏览器设置胜过JavaScript)。

新窗户

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

新标签

var myWin = window.open(strUrl, strWindowName);

- 要么 -

var myWin = window.open(strUrl);

13
2017-11-18 09:14



“只需省略[strWindowFeatures]参数” - 问题中的代码 已经做到了。 “除非浏览器设置覆盖” - 问题的关键是对抗浏览器设置。 - Quentin