我正在进行一个HTML项目，但不知道如何在没有JavaScript的情况下打开链接到新标签页。
我已经知道<a href="http://www.WEBSITE_NAME.com"></a>会在当前标签页中打开链接。您有什么想法可以让它在新的标签页中打开吗？
如何在HTML中在新标签页打开链接？
619
- ZenthyxProgramming
3
12个回答
967
将链接的target属性设置为_blank：
<a href="#" target="_blank" rel="noopener noreferrer">Link</a>
其他示例请参见此处：http://www.w3schools.com/tags/att_a_target.asp
注意
我之前建议使用blank而不是_blank，因为如果使用后者，它会在新标签页中打开链接，并且如果再次点击链接，则会在同一标签页中打开。然而，正如GolezTrol所指出的那样，这只是因为它引用了一个框架/窗口的名称，在再次按下链接以在同一标签页中打开它时将被设置和使用。
安全考虑！
rel="noopener noreferrer"是为了防止新打开的标签页恶意地修改原始标签页。有关此漏洞的更多信息，请阅读以下文章：
- SharkofMirkwood
10
27所有的特殊目标都以下划线开头。
blank是一个帧或窗口的名称。可能看起来好像有效，因为当没有名为“blank”的窗口或选项卡存在时，将会打开一个新的窗口或选项卡，但第二次单击链接应该会再次在同一选项卡中打开页面，而不是打开另一个。 - GolezTrol3嗯，我想它并不是无效的，只是不同而已。我认为，你可以用
foo 来替代 blank，而 _blank 实际上具有特殊意义。我找不到任何信息来证明相反的情况。你能找到吗？ - GolezTrol2@Stefan 不，'_blank' 就可以了；每个链接都会在不同的标签页中打开。如果您指定一个没有下划线的名称（例如'blank'），则链接将在同一标签页中打开。 - SharkofMirkwood
9提示：注意由"_blank"导致的漏洞。更多信息请查看https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c。 - Aistis
2另一个存在漏洞的页面是https://mathiasbynens.github.io/rel-noopener，它本身就是一个例子。 - PhoneixS
显示剩余5条评论
132
根据您的需求选择其中之一。
在新窗口或选项卡中打开链接文档：
<a href="xyz.html" target="_blank"> Link </a>
在与点击相同的框架中打开链接文档（这是默认设置）：
<a href="xyz.html" target="_self"> Link </a>
在父框架中打开链接文档：
<a href="xyz.html" target="_parent"> Link </a>
在完整窗口中打开链接文档：
<a href="xyz.html" target="_top"> Link </a>
在指定的框架中打开链接文档：
<a href="xyz.html" target="framename"> Link </a>
- Learner Always
4
谢谢提供的信息。如何在单击链接时在新标签页中打开它？ - Shajeel Afzal
使用上面分享的HTML代码。当您使用target="_blank"时，大多数新浏览器默认在新标签页中打开链接。 - Learner Always
3请注意，
target="_blank" 存在漏洞，您可以在 https://mathiasbynens.github.io/rel-noopener 上阅读相关信息。 - PhoneixS我不确定为什么它被称为框架，而不是选项卡或窗口。 对我来说，使用NL名称每次都会创建一个新的选项卡。 一些评论（和其他来源）说，使用相同的名称将使用相同的选项卡。 这正是我想要的，但是每次单击都会创建另一个新的选项卡，而不是更改第一个选项卡的内容。 - WGroleau
50
如果您想为整个网站一次性执行该命令，而不是在每个链接后都执行它。请尝试将其放置在网站 Head 中，然后轻松搞定。
<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>
希望这可以帮到您。
- Cyberquill
2
4请不要忘记添加 rel="noopener noreferrer"。 - Blundering Philosopher
基础标签不支持rel属性。 - Alex O
18
使用 target="_blank"：
<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
- Evan Hahn
1
4请勿忘记添加 rel="noopener noreferrer"。 - Blundering Philosopher
11
何时使用target='_blank'：
HTML版本（某些设备不支持）：
<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>
适用于所有设备的 JavaScript 版本：
使用 rel="external" 完全有效。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('a[rel="external"]').attr('target', '_blank');
</script>
对于Jquery，您可以尝试以下方法：
$("#content a[href^='http://']").attr("target","_blank");
如果浏览器设置不允许在新窗口中打开：
href = "google.com";
onclick="window.open (this.href, ''); return false";
- Kaleem Ullah
1
1不要忘记添加 rel="noopener noreferrer"。 - Blundering Philosopher
7
target="_blank"属性可以实现此功能。只需不要忘记添加rel="noopener noreferrer"以解决潜在的漏洞问题。详情请参见：https://dev.to/ben/the-targetblank-vulnerability-by-example
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>
- Vadym P
1
1这里有漏洞的另一个解释：https://mathiasbynens.github.io/rel-noopener/ - Blundering Philosopher
4
你可以使用target属性在新标签页中打开链接
<a href="https://google.com" target="blank"> Google Link </a>
OR
<a href="https://google.com" target="blank"> Google Link </a>
区别
_blank 总是会在新标签页中打开链接
blank 第一次会在新标签页中打开链接，但第二次会更新现有标签页
- Muhammad Azam
4
您可以使用：
<a href="http://www.WEBSITE_NAME.com" target="_blank"> Website</a>
然而，以上代码使你的网站容易受到网络钓鱼攻击。你可以通过在链接中添加rel="noopener noreferrer"来防止这种情况在某些浏览器中发生。添加后，上述示例将变为：
<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>
查看更多信息： https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml
（此链接为IT技术相关内容，介绍如何在新窗口或选项卡中打开链接）- Thabang
3
你可以这样做：
<a href="http://www.WEBSITE_NAME.com" target="_blank" rel="noopener noreferrer">Open</a>
Originally was:
<a href="http://www.WEBSITE_NAME.com"></a>
关于安全和隐私方面的更多信息，请参见MDN上的以下网址:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy
该网页还有一个链接，指向一篇很好的文章，题为Target="_blank" - the most underestimated vulnerability ever:
https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
- darmis
0
在React中，如果有人想要在新标签页中打开链接，请使用来自react-router-dom的标签，因为会刷新整个页面，即使您的页面仅更改了一些文本或图像从而跳转到新路径。关于Link的使用请参考此处。
- Ankita Srivastava
4
1鉴于问题与React无关，至少发布一个React用户可以复制粘贴的代码示例会很有帮助。 - shaedrich
@shaedrich 我已在回答中分享了链接，其中包含不错的示例和用法。 - Ankita Srivastava
1SO上的链接问题在于它们未来可能不再有效，你的答案也就不再有用了。这就是为什么SO更喜欢自包含的答案，其中链接只是额外的资源，而不是答案严重依赖的内容。 - shaedrich
1谢谢您告诉我这个信息，我会尽快添加示例。 - Ankita Srivastava
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<a href="url" target="_blank">...</a>。 - Rohit Agrawal