如何在 HTML 的新选项卡中打开链接?

Posted

技术标签:

【中文标题】如何在 HTML 的新选项卡中打开链接?【英文标题】:How to open link in a new tab in HTML? 【发布时间】:2013-07-16 16:14:12 【问题描述】:

我正在处理一个 html 项目,但我不知道如何在没有 javascript 的情况下在新选项卡中打开链接。

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

【问题讨论】:

使用<a href="url" target="_blank">...</a> 正如 Rohit 所说,添加参数 target="_blank",但是,至少在 FireFox 上,如果您执行两个下划线 target="__blank",它将在新选项卡中打开,但使用单击其他链接同样的双下划线,在前一个新标签中打开新页面,这意味着您只打开了一个额外的标签。 使用target="_blank"时不再需要使用rel="noopener",默认添加source 【参考方案1】:

将链接的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"是为了防止新打开的标签页能够恶意修改原来的标签页。有关此漏洞的更多信息,请阅读以下文章:

The target="_blank" vulnerability by example External Links using target='_blank'

【讨论】:

特殊目标都以下划线开头。 blank 是框架或窗口的名称。这似乎可行,因为当不存在名称为“空白”的新窗口或选项卡时,可能会打开一个新窗口或选项卡,但再次单击该链接应再次在同一选项卡中打开页面,而不是打开另一个。 好吧,我想这不是无效的,只是不同而已。除了blank,我认为你也可以使用foo,而_blank实际上有特殊含义。我找不到任何信息来证明其他情况。可以吗? @Stefan 不,_blank 会好的;每个链接将在不同的选项卡中打开。如果您指定的名称不带下划线(例如blank),则链接将在同一选项卡中打开。 提示:注意由于 _blank 导致的漏洞。更多信息medium.com/@jitbit/… 另一个带有漏洞mathiasbynens.github.io/rel-noopener的页面,它本身就是一个例子。【参考方案2】:

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

在新窗口或标签页中打开链接的文档:

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

See MDN

【讨论】:

感谢您的信息。点击时如何在新标签页中打开链接? 使用html中的代码,如上所述。当您使用 target="_blank" 时,大多数新浏览器默认会在新选项卡中打开链接 请记住target="_blank" 有一个漏洞,您可以在mathiasbynens.github.io/rel-noopener 中了解它【参考方案3】:

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

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

希望对你有帮助

【讨论】:

别忘了加上 rel="noopener noreferrer" base标签不支持rel属性。【参考方案4】:

使用target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>

【讨论】:

别忘了加上 rel="noopener noreferrer"【参考方案5】:

何时使用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";

【讨论】:

别忘了加上 rel="noopener noreferrer"【参考方案6】:

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>

【讨论】:

这里对漏洞的另一种解释:mathiasbynens.github.io/rel-noopener【参考方案7】:

你可以使用:

<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

【讨论】:

【参考方案8】:

你可以这样做:

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

原来是:

<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" 的好文章的链接 - 有史以来最被低估的漏洞

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

【讨论】:

【参考方案9】:

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

&lt;a href="http://www.WEBSITE_NAME.com" target="_blank"&gt;&lt;/a&gt;

【讨论】:

【参考方案10】:

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

<a href="mysite.com" target="_blank" rel="noopener noreferrer" >Click me to open in new Window</a>

【讨论】:

【参考方案11】:

对于 React,如果有人想在新选项卡中打开链接。请使用 react-router-dom,因为 &lt;a href="/path"&gt;&lt;/a&gt; 刷新整个页面,即使您的页面仅更改新路由上的一些文本或图像。 链接使用请参考here

【讨论】:

鉴于问题与反应无关,至少发布一个反应用户可以复制粘贴的代码示例会有所帮助。 @shaedrich 我已经分享了答案中的链接,其中包括很好的示例和用法 SO 上的链接的问题是它们将来可能不再起作用,您的回答将不再有用。这就是为什么 SO 更喜欢独立的答案,其中链接只是附加资源而不是那些,答案严重依赖。 感谢您让我知道这一点,我会尽快添加示例。

以上是关于如何在 HTML 的新选项卡中打开链接?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 NextJS 的新选项卡中打开链接?

如何在角度 2 的新选项卡中打开路由 url?

如何使用html在新选项卡中打开指向pdf文件的链接

以编程方式在反应路由器的新选项卡中打开链接

Vue.js:如何在已打开的选项卡中打开外部链接?

在新选项卡中打开链接(WebBrowser 控件)