如何在新标签页中打开链接(而不是新窗口)?

74

我有一个“打开”按钮,该按钮会“计算”应在新选项卡中打开的链接。

我尝试使用:

window.open(url, '_blank');

但这会打开一个新窗口。

我还尝试了以下方法:

<form id="oform" name="oform" action="" method="post" target="_blank">
</form>

...

document.getElementById("oform").action = url;
document.getElementById("oform").submit();

然而,打开了一个新的窗口,而不是一个新的标签页。

当使用简单的 <a href...> 并设置了 target='blank',链接会在新的标签页中打开。

是否有解决方案?


在Chrome中,当提交表单时,<form target="_blank"> 会在新标签页中打开,因此这取决于浏览器。 - pimvdb
我使用Chrome浏览器,但它却在新窗口中打开而不是新标签页。 - Erik Sapir
7个回答

69

更新[2019]当你将目标设置为_blank时,大多数浏览器现在会在新选项卡中打开。弹出窗口的时代已经一去不复返了。我们现在可以使用:

 <a href="some url" target="_blank">content of the anchor</a>

大多数合理的浏览器会在新标签页中打开新窗口。


CSS3支持通过属性target-new在新标签页中打开链接。

target-new: window | tab | none;

更新[2016]:正如评论中所指出的那样,此方法从未纳入CSS3规范中,不应使用。但是,可以看到大多数现代浏览器仍然会在新标签页中打开target='_blank'链接,除非立即尝试调整新标签页的大小。然而,在规范中似乎没有强制执行此行为的机制。


[2011] 如果要使用一种得到广泛支持的强制在新标签页中打开的方法,请尝试以下操作:

<a href="some url" target="_newtab">content of the anchor</a>
否则,使用此方法立即调整窗口大小,以确保弹出窗口拦截器不会关闭您的弹出窗口。

我必须同意Kon的观点,你正在剥夺用户的选择权,应该仔细考虑。每个用户都有自己的偏好和工作流程,这使得他们能够实现所需的偏好。为他们做出这个选择会剥夺他们的偏好,例如(中键变成静音)。然而,我可以想到一些情况下这是需要的,例如对话框、收据、打印等。 - avanderw
_newtab 可以使用,但它不符合 W3C 标准。 - Joel DeWitt
此时,在 Opera 中似乎 _newtab 不起作用,这可能意味着它在 Chrome 中也不起作用。 - Charles Wood
这似乎也没有被纳入CSS3中; 它在W3C:CSS参考中没有提到,也不在其CSS3浏览器支持表中。 - Tomas Aschan
@TomasLycken 不是的。这个答案中链接的是一个非常旧的工作草案(2004年2月24日)。如果你点击了最新版本(2014年10月14日),它会说“...该规范不再被开发”。话虽如此,我认为我们不应该把W3School作为唯一的真相来源。 - widyakumara
显示剩余6条评论

9

除了@anirudh4444提到的CSS3 target-new选项外,你不能也不应该这样做。你试图控制用户的体验,而这很可能应该由用户自己决定。


我知道一些网站,点击“登录”按钮会打开一个新标签页。 - Erik Sapir
3
那样做就对了吗? - Kon
许多浏览器都会阻止弹出窗口。我希望链接在新标签页中打开,这样就不会被阻止了。 - Erik Sapir
1
我不确定这样做能否阻止它被屏蔽。有些弹出窗口拦截器也会防止新标签页的生成。从用户体验的角度考虑,你最好使用轻量级的lightbox/modal效果,而不是试图操纵浏览器窗口/标签页集合。这只是我的个人意见。 - Kon
如果您担心窗口被“阻止”,请不要担心。如果用户单击普通链接,浏览器不会阻止该窗口。如果您使用JavaScript打开此新链接,则可能会出现问题。 - Wex
那我有一个问题:P。我使用JavaScript。 - Erik Sapir

7
您可以使用以下任何一种,在6个不同的浏览器中都进行了测试。(Google Chrome,Mozilla Firefox,Microsoft Internet Explorer,Opera,K-meleon*和Seamonkey。)
  1. <a href="blaah" target="_blank">Blaah</a>
  2. <a href="blaah" target="_tab">Blaah</a>
  3. <a href="blaah" target="_new">Blaah</a>
它们都能完全相同地工作,选择完全取决于个人偏好。
*K-meleon出现了问题,只是打开了我点击链接时所在的页面。

1
请查看 https://dev59.com/rW445IYBdhLWcg3wQX6G#4964223 。虽然它们都能够工作,但推荐使用"_blank"。 - Brian
2
它们在您第一次点击此类链接时可能都有效。但是,第二次单击此类链接时,它可能会在新标签页中打开,或者可能会在上次使用的同一标签页中打开该URL。只有 target="_blank" 被定义为始终使用新标签页(如果您的浏览器配置为这样,则使用新窗口)。 - Jesse Chisholm

3

3
虽然这个链接可能回答了问题,但最好在此处包含答案的基本部分,并提供链接作为参考。仅提供链接的答案可能会因为链接页面更改而失效。 - Irvin Dominin
第一个链接已经失效。 - Dairo

1

您的表单具有target="_blank"(包括前导下划线),而您的简单链接具有target='blank',没有前导下划线。 "_blank"是指定特定操作的保留字,但"blank"是特定窗口(可能是新窗口)的名称。这就是为什么您会得到不同的结果。两者都是弹出窗口,但类型不同。

每个用户都可以最终控制弹出窗口是否应打开新窗口或新选项卡。您无法对此做任何事情。


0
以下内容适用于Chrome浏览器:
<script>
    function buildAndGo() {
        var aEl = document.getElementById('missingLink');
        aEl.href = "#" + resultOfSomeCalculation();

        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );

        aEl.dispatchEvent(e);
    }
</script>
...
<button onclick="buildAndGo()">Do it</button>
<a href="#" id="missingLink" target="_blank" style="visibility: hidden;"></a>

从以下资源开始尝试使IE版本工作: Selenium BrowserBot, YUI User Action


-3

如果是链接,只使用target标签就可以了。

但是如果是按钮,尝试使用onclick函数来代替仅使用_blank

使用window.open(url, target)函数 - 它接受一个URL和一个目标窗口名称,其行为与链接上的target="something"属性相同....像这样

button(type="button", onclick="window.open('auth/google', '_blank');")

这应该可以工作。


2
"window.open(url, '_blank');" 正是 OP 所说的无法正常工作的代码。 - RichieHindle

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