如何在HTML的新标签打开链接?

我在一个HTML项目上工作，我不知道如何在没有JavaScript的新选项卡中打开链接。

我已经知道<a href="http://www.WEBSITE_NAME.com"></a>在同一个选项卡中打开链接。有什么办法能让它在一个新的盒子里打开吗?

893183 次浏览
小开
最佳答案

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

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

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

请注意

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

安全考虑!

rel="noopener noreferrer"是为了防止新打开的选项卡能够恶意修改原始选项卡。有关此漏洞的详细信息，请阅读以下文章:

小开

使用# EYZ0:

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

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

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

 <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

小开

如果你想为你的整个网站做一次命令，而不是在每个链接之后做。试试这个地方 

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

希望这能有所帮助

小开

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

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

你可以使用:

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

查看更多信息: # EYZ0 < / p >

小开

你可以这样做:

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

原来是:

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

还可以查看中数上的以下url，了解更多关于安全和隐私的信息:

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

它有一个链接到一篇名为目标=“_blank"-有史以来最被低估的弱点的好文章:

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

小开

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

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

小开

如果有人想使用它来应用react，那么你可以遵循下面给出的代码模式。你必须添加额外的属性，也就是rel。

<a href="mysite.com" target="_blank" rel="noopener noreferrer" >Click me to open in new Window</a>
小开
在React的情况下，如果有人想在一个新标签中打开链接。请使用from react-router-dom，因为<a href="/path"></a>会刷新整个页面，即使你的页面只改变了新路由上的一些文本或图像。 链接使用请参考在这里

小开

您可以使用目标属性在新选项卡中打开链接

 <a href="https://google.com" target="blank"> Google Link </a>

或

<a href="https://google.com" target="blank"> Google Link </a>

区别

平等自愿将始终打开链接的新选项卡

空白将第一次打开新的标签链接，但第二次它将更新现有的标签


提交答案