512

我正在开发一个 HTML 项目，但我不知道如何在没有 JavaScript 的情况下在新选项卡中打开链接。

我已经知道<a href="http://www.WEBSITE_NAME.com"></a>在同一个选项卡中打开链接。任何想法如何使它在一个新的打开？

4

11 回答 11

816

将target链接的属性设置为_blank：

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

有关其他示例，请参见此处：http ://www.w3schools.com/tags/att_a_target.asp

笔记

我之前建议blank不要这样做，_blank因为如果使用它，它将打开一个新选项卡，然后如果再次单击链接，则使用相同的选项卡。然而，这仅仅是因为，正如 GolezTrol 所指出的，它指的是框架/窗口的名称 a，当再次按下链接以在同一选项卡中打开它时，将设置和使用该名称。

安全考虑！

是为了防止新打开的rel="noopener noreferrer"标签页能够恶意修改原来的标签页。有关此漏洞的更多信息，请阅读以下文章：

于 2013-07-17T22:11:13.067 回答
119

根据您的要求使用其中之一。

在新窗口或选项卡中打开链接的文档：

 <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>

见 MDN

于 2014-07-12T18:55:19.583 回答
45

如果您想为整个站点执行一次命令，而不是在每个链接之后都执行此操作。在您的网站头部和宾果游戏中试试这个地方。

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

希望这可以帮助

于 2015-11-05T13:29:40.927 回答
16

使用target="_blank"：

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
于 2013-07-17T22:11:40.343 回答
10

何时使用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";
于 2015-11-05T13:57:26.297 回答
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>
于 2018-06-22T07:58:34.197 回答
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

于 2019-03-02T10:59:48.003 回答
3

你可以这样做：

<a href="http://www.WEBSITE_NAME.com" target="_blank" rel="noopener noreferrer">Open</a>

原来是：

<a href="http://www.WEBSITE_NAME.com"></a>

另请查看MDN上的以下 url，了解有关安全和隐私的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

其中又包含指向一篇名为Target="_blank" 的好文章的链接——这是有史以来最被低估的漏洞：

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

于 2020-05-08T10:15:08.707 回答
1

在新选项卡中打开链接的简单方法是在链接中添加一个目标属性，其值等于“_blanl”，如下所示：

<a href="http://www.WEBSITE_NAME.com" target="_blank"></a>

于 2020-07-11T06:41:54.157 回答
1

如果有人正在寻找使用它来应用反应，那么您可以遵循下面给出的代码模式。您必须添加额外的属性，即 rel。

<a href="mysite.com" target="_blank" rel="noopener noreferrer" >Click me to open in new Window</a>
于 2020-09-18T20:35:23.380 回答
0

在 React 的情况下，如果有人想在新选项卡中打开链接。请使用 react-router-dom，因为<a href="/path"></a>刷新整个页面，即使您的页面仅更改新路由上的某些文本或图像。链接使用请参考这里

于 2021-05-26T11:12:27.120 回答