在新标签页中打开URL(而不是新窗口)

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个回答

4
这个问题是可以解决的,答案不是“不行”。我找到了一个简单的解决方法:
步骤1:创建一个隐藏链接: <a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a> 步骤2:通过编程方式点击该链接: document.getElementById("yourId").click(); 就这样!对我来说非常有效。

2
这可能会在新标签页或窗口中打开,具体取决于浏览器设置。问题特别涉及在新标签页中打开,即使偏好设置为新窗口。 - Quentin

2
这是一个示例,展示如何将它放入 HTML 标签中。
<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>

这个不起作用。它会根据用户的偏好打开新标签页,而不是强制新建一个标签页。(它也与原帖中用户正在使用并声明不起作用的代码相同!) - Quentin

0
这可能是一种hack方法,但在Firefox中,如果您指定第三个参数'fullscreen=yes',它会打开一个全新的窗口。
例如,
<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

它似乎实际上覆盖了浏览器的设置。


0

创建一个带有_blank作为target属性值和url作为 href <a>标签,并使用样式display:hidden添加一个子元素。然后将其添加到DOM中,最后在子元素上触发点击事件。

更新

这种方法不起作用。浏览器会阻止默认行为。虽然可以通过编程方式触发它,但它不遵循默认行为。

您可以自行检查:http://jsfiddle.net/4S4ET/


0

window.open(url)会在新的浏览器标签页中打开URL。下面是它的JavaScript替代方案:

let a = document.createElement('a');
a.target = '_blank';
a.href = 'https://support.wwf.org.uk/';
a.click(); // We don't need to remove 'a' from the DOM, because we did not add it

这里有一个工作示例(Stack Overflow 片段不允许打开新标签页)。


1
"window.open(url)会在新的浏览器标签页中打开url,它将遵循用户对于新窗口或新标签页的偏好。当用户偏好于新窗口时,它不会强制打开新标签页(这也是问题所在)。target=_blank同样适用于此。" - Quentin
1
你所提出的两种方法在此前56个未被删除的回答中已经被提及(并受到批评)多次。 - Quentin

-1

有很多答案建议将目标设为“_blank”,但我发现这并没有起作用。正如Prakash所指出的那样,这取决于浏览器。然而,您可以向浏览器提出某些建议,例如窗口是否应该有一个位置栏。

如果您建议足够多的“类似选项卡的东西”可能会得到一个选项卡,就像Nico对这个更具体问题的Chrome回答所述:

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

免责声明:这不是万能药。最终还是取决于用户和浏览器。现在,至少您已经指定了一个更多的偏好,以便您的窗口看起来更加符合您的要求。


这里没有任何人叫“Prakash”,无论是在回答(包括已删除的回答)中还是在评论中(甚至没有接近的)。用户名称随时可能更改。它指的是哪个回答或评论? - Peter Mortensen

-2

这种方法与先前的解决方案类似,但实现方式不同:

.social_icon -> 一些带有CSS的类

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>

 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

-2

从 Firefox (Mozilla) 扩展程序中打开新选项卡的方式如下:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");

-2

这对我有效。只需阻止事件,将 URL 添加到 <a> 标签中,然后触发该标签上的点击事件。

JavaScript

$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href', "http://someurl.com");
        $(this).trigger('click');
});

HTML

<a href="#" class="myBtn" target="_blank">Go</a>

这可能会在新标签页或窗口中打开,具体取决于浏览器设置。问题是即使偏好设置为新窗口,也特别涉及在新标签页中打开的情况。 - Quentin

-4

我有点同意那个写过(这里是引述):“对于现有网页中的链接,如果新页面属于与现有网页相同的网站,则浏览器将始终在新选项卡中打开链接。” 对于我来说,至少在Chrome、Firefox、OperaInternet ExplorerSafariSeaMonkeyKonqueror中,这个“通用规则”都适用。

无论如何,有一种更简单的方法可以利用其他人提出的内容。假设我们谈论的是您自己的网站(下面是“thissite.com”),您想要控制浏览器的操作,那么您希望“specialpage.htm”为空,其中没有任何HTML(这样可以节省从服务器发送数据的时间!)。

 var wnd, URL; // Global variables

 // Specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); // Get reference to just-opened page
 // If the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  // Ultimate destination
 setTimeout(gotoURL(), 200);  // Wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { 
   wnd.open(URL, "_self");  // Replace the blank page, in the tab, with the desired page
   wnd.focus();             // When browser not set to automatically show newly-opened page, this MAY work
 }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接