logo标签列表

在新标签页中打开URL（而不是新窗口）

javascripttabshref
2813

我正在尝试在新标签页中打开一个URL，而不是弹出窗口。

我看到了类似的问题，其响应大致如下：

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

但是这些方法都没有对我起作用，浏览器仍然试图打开一个弹出窗口。

96
通常这是个人偏好的问题。有些人喜欢用窗口（并强烈坚持这种行为），有些人喜欢用标签页（也同样强烈坚持）。因此，你要改变的是一种通常被认为是品味问题而非设计问题的行为方式。 - Jared Farrish
56
JavaScript 不了解您的浏览器、选项卡和窗口之间的区别，所以打开新窗口的方式完全由浏览器决定。 - Andrey
8
我该如何配置Chrome在新标签页中显示页面，而不是弹出窗口？ - Mark
13
在Chrome中，Gmail可以通过某种方式实现此功能。按住Shift并单击电子邮件行即可在新窗口中打开该邮件。按住Ctrl并单击则将其在新标签页中打开。唯一的问题是：深入挖掘Gmail的代码可能非常麻烦。 - Sergio
58
@Sergio，这是任何链接的默认浏览器行为（至少适用于 Chrome 和 Firefox），与 Gmail 无关。 - Qtax
显示剩余13条评论
33个回答
2524

这是一个技巧，

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

// Or just
window.open(url, '_blank').focus();

在大多数情况下，这应该直接在链接的 onclick 处理程序中发生，以防止弹出窗口拦截器和默认的“新窗口”行为。你可以通过这种方式或通过向你的DOM对象添加事件侦听器来完成。

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

参考资料：使用JavaScript在新标签页中打开URL

146
不起作用，在地址栏右侧得到一条消息：弹出窗口已阻止。然后我允许了弹出窗口。然后它在一个弹出窗口而不是选项卡中打开！使用的浏览器是OS X Lion上的Chrome 22.0.1229.94。 - nalply
52
@b1naryatr0phy 这是因为您实际上没有正确测试它。更改浏览器的设置。是在选项卡还是窗口中打开由浏览器的设置决定。通过调用window.open（或任何JavaScript）无法选择如何打开新窗口/选项卡。 - Ian
4
变量win = window.open（url，'_blank'）;“_blank”不是必需的。对于window.open（），第二个参数是strWindowName，用于指定新窗口的名称。该名称可用作链接和表单的目标，使用<a>或<form>元素的target属性。名称不应包含任何空格字符。请注意，strWindowName并不指定新窗口的标题。 - hydRAnger
5
@hydRAnger，MDN上的window.open()链接相同：为了在每次调用window.open()时打开一个新窗口，请使用windowName的特殊值_blank。 - rdela
6
如果有任何需要更改浏览器设置的地方，请避免更改！ - mukuljainx
显示剩余5条评论
1127

作者无法选择在新窗口而非新标签页中打开链接，这是用户偏好。(需要注意的是，在大多数浏览器中默认的用户偏好是使用新标签页打开，因此在那些未更改偏好设置的浏览器上进行的简单测试可能无法证明这一点。)

CSS3 提出了 target-new，但该规范已被放弃。

反过来则不成立：通过在 window.open() 的第三个参数中指定某些窗口特性，您可以在偏好为标签页的情况下触发新窗口的打开。

3
为什么这个答案被接受了？我已经测试了来自Duke和Arikfr的答案，它们在Firefox、Chrome和Opera中都可以完美地工作，除了IE（不起作用）和Safari（它在新窗口中打开而不是新标签页）。 - CobaltBabyBear
50
JavaScript与新标签页/窗口的打开方式无关，由浏览器的设置决定。使用window.open告诉浏览器打开新内容，然后浏览器会根据设置打开选项卡或窗口。在你测试的浏览器中，将设置更改为在新窗口中打开而不是选项卡，你会发现其他人的解决方案是错误的。 - Ian
310
比告诉别人某事无法完成，浪费别人时间的两件事情更严重：（1）告诉他们不能完成的事情实际上是可以完成的。（2）保持沉默让他们继续寻找一种无法实现的方法。 - Quentin
1
@Luke：如果你只是想在自己的浏览器中获得这个功能，那么这可能是一个适合在SuperUsers网站上提问的问题。 - Trevor
2
@Bondye - 这个问题是在询问如何打开新的标签页而不是新的窗口。你得到新的窗口其实就是重点。 - Quentin
显示剩余3条评论
430

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

31
将此回答标记为“正确答案”会很好。 我在 Chrome v26（Windows）上的测试证实，如果代码位于按钮的单击处理程序中，则会打开新选项卡，如果以编程方式调用代码（例如从控制台），则会打开新窗口。 - CyberFonic
2
从我的浏览器默认设置的测试来看，这个答案适用于其他答案不适用的情况。那个被接受的回答说“你无能为力”只有在用户更改了默认设置时才是正确的。 - Garfield
@Ian 为了明确起见，我在回答中提到了有关用户设置的警告。"只要用户在浏览器中具有适当的设置，这将起作用。" 我认为大多数用户不会更改浏览器设置，这个答案适用于他们中的大多数人。 - Venkat Kotra
1
在Chrome中，async: false不起作用。要从回调函数中打开一个新窗口，您需要先打开一个空窗口，然后发送HTTP请求并稍后更新它。这里有一个好的技巧。 - attacomsian
需要使用 e.preventDefault() 吗？ - Tristanisginger
341

这会创建一个虚拟的 a 元素，并给它设置 target="_blank"，以便在新标签页中打开它，为其提供正确的 URL href，然后单击它。

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

然后你可以像这样使用它：

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

重要提示：

这个函数必须在所谓的“可信事件”回调中被调用，例如在单击事件期间（不一定直接在回调函数中，但在单击操作期间）。否则，浏览器会阻止打开新页面。

如果您在某个随机时刻手动调用它（例如在间隔或服务器响应之后），它可能会被浏览器阻止（这是有道理的，因为它可能会导致安全风险并影响用户体验）。

9
谢谢。您的纯JS代码有一个问题--正如Luke Alderton所写（请参见下文），您需要将创建的元素附加到文档主体，否则在您的代码中它就会悬空，至少在Firefox 37中没有任何反应。 - greenoldman
7
任何非用户行为触发的动作，比如说鼠标点击以外的操作，都会被弹出窗口屏蔽器拦截。想象一下，如果可以在没有用户行为的情况下通过Javascript打开任何URL，那将是相当危险的。如果将这段代码放在点击事件等事件内，它就能正常工作，这和这里提出的所有解决方案都是一样的。 - Adam Pietrasiak
4
您可以将代码简化为以下形式：$('<a />', {'href': url, 'target': '_blank'})[0].click(); - shaedrich
15
受@shaedrich的代码启发，我加入了一个不需要jQuery的一行代码：Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click(); - Adam Pietrasiak
1
使用target="_blank"而不加上rel="noreferrer"和rel="noopener"会使网站容易受到window.opener API攻击（漏洞描述），尽管需要注意的是，在较新版本的浏览器中，设置target="_blank"隐含地提供了与设置rel="noopener"相同的保护。 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/A - Ukr
显示剩余2条评论
275

浏览器对于如何处理window.open有不同的行为

你不能指望所有浏览器都有相同的行为。在不同的浏览器中，window.open无法可靠地在新标签页中打开弹出窗口，而这还取决于用户的偏好。

例如，在Internet Explorer（11）中，用户可以选择在新窗口或新标签页中打开弹出窗口。你不能通过window.open强制Internet Explorer 11以某种方式打开弹出窗口，正如Quentin的回答所暗示的那样。

至于Firefox（29），window.open(url，'_blank')的行为取决于浏览器的标签页首选项，但你仍然可以通过指定宽度和高度来强制在弹出窗口中打开URL（请参见下面的“Chrome”部分）。

Internet Explorer（11）

你可以设置Internet Explorer在新窗口中打开弹出窗口：

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

在这样做后，尝试运行window.open(url)和window.open(url, '_blank')。注意页面会在新窗口中打开，而不是新标签页。

Firefox（29）

你也可以设置选项来在新窗口中打开标签页，然后看到相同的结果。

Chrome

据说Chrome（版本34）没有任何设置来选择在新窗口或新标签页中打开弹出窗口。虽然在这个问题中讨论了一些方法（如编辑注册表）。

在Chrome和Firefox中，指定宽度和高度将强制弹出窗口（如这里的答案中所述），即使用户已将Firefox设置为在新标签页中打开新窗口。

let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')

然而，在 Internet Explorer 11 中，如果在浏览器偏好设置中选择了选项卡，相同的代码将始终在新标签页中打开链接，指定宽度和高度将不会强制弹出新窗口。

在 Chrome 中，使用window.open在onclick事件中使用时会打开新标签页，在浏览器控制台中使用时会打开新窗口(如其他人所指出)，当指定宽度和高度时，将弹出弹出窗口。

更多阅读：window.open 文档。

34
你没有回答问题，只是证明了window.open不一致。 - BentOnCoding
请提供一个解决方案，这个“答案”需要一个解决方案。 - Kevin Danikowski
99
如果您使用 window.open(url, '_blank')，在Chrome浏览器中将被阻止（弹出窗口阻止程序）。
请尝试以下操作：
//With JQuery

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

纯使用JavaScript编写，

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
但在这个问题中，他们没有提到网站作者。只想在新窗口或新标签页中打开一个URL。这取决于浏览器。我们不需要担心作者。请检查那个小样。它正在工作。 - Mohammed Safeer
发现在 js fiddle 和 plunker 上无法工作，但是当你创建一个 HTML 文件时就可以工作了。这是因为在 js fiddle 中，输出显示在 iframe 上，所以新窗口被阻止了，因为请求是在一个沙盒帧中进行的，而该帧的 'allow-popups' 权限未设置。 - Mohammed Safeer
76

为了详细说明Steven Spielberg的答案，我在这种情况下这样做：

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

在浏览器跟随链接之前，我设置了目标属性，这样它就会在新的选项卡或窗口中打开该链接（取决于用户的设置）。

jQuery 的一行示例：

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

这也可以使用浏览器原生的DOM API来实现：

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
使用jQuery或JavaScript定义target="_blank"属性。然后使用JavaScript打开链接。这可能会起作用。 - Peter Mortensen
75

我使用以下代码，它运行得非常好！

window.open(url, '_blank').focus();
5
根据浏览器设置，可能会在新标签页或窗口中打开。问题特别涉及是否在新标签页中打开，即使偏好设置是为了新窗口。 - Quentin
正确，但正如我们所建立的那样。在选项卡或窗口中打开是用户的偏好。这个关于在新窗口或选项卡中打开URL的答案非常优秀和简单。 - nire
22
20
有趣的事实是，如果操作不是由用户触发（点击按钮或其他操作），或者操作是异步的，新标签页将无法打开，例如，以下内容不会在新标签页中打开：
$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但是根据浏览器设置，这可能会在新标签页中打开:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
3
这个弹出窗口在Firefox 28、Chrome 34b和Safari 7.0.2中都被阻止了，这是默认设置。 :( - Steve Meisner
1
如果新标签页不是由用户触发的操作（例如点击按钮或其他操作）或者是异步的，则无法打开 - 这适用于Chrome，但并非所有浏览器都如此。将<script>open('http://google.com')</script>保存到.html文件中，并在最新版本的Firefox中进行全新安装后打开它；您会发现Firefox可以愉快地在新标签页中打开Google（也许在您允许弹出窗口之后），而不是在新窗口中打开。 - Mark Amery
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接