我在一个HTML项目上工作,我不知道如何在没有JavaScript的新选项卡中打开链接。
我已经知道<a href="http://www.WEBSITE_NAME.com"></a>在同一选项卡中打开链接。有什么办法能让它在一个新的盒子里打开吗?
我在一个HTML项目上工作,我不知道如何在没有JavaScript的新选项卡中打开链接。
我已经知道<a href="http://www.WEBSITE_NAME.com"></a>在同一选项卡中打开链接。有什么办法能让它在一个新的盒子里打开吗?
当前回答
将链接的目标属性设置为_blank:
<a href="#" target="_blank" rel="noopener noreferrer">Link</a>
其他示例请参见:http://www.w3schools.com/tags/att_a_target.asp
Note
我之前建议使用blank而不是_blank,因为如果使用,它将打开一个新选项卡,然后在再次单击链接时使用相同的选项卡。然而,正如GolezTrol指出的那样,这只是因为它引用了框架/窗口的名称a,当再次按下链接在同一个选项卡中打开它时,将设置并使用该名称a。
安全考虑!
rel="noopener noreferrer"是为了防止新打开的选项卡能够恶意修改原始选项卡。有关此漏洞的详细信息,请阅读以下文章:
target="_blank"漏洞示例 使用target='_blank'的外部链接
其他回答
何时使用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";
你可以使用:
<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
在React的情况下,如果有人想在一个新标签中打开链接。请使用from react-router-dom,因为<a href="/path"></a>刷新整个页面,即使您的页面只改变了新路由上的一些文本或图像。 链接的使用请参考这里
您可以使用目标属性在新选项卡中打开链接
<a href="https://google.com" target="blank"> Google Link </a>
OR
<a href="https://google.com" target="blank"> Google Link </a>
区别
_blank将总是打开新的标签链接
空白将第一次打开新的标签链接,但第二次它将更新现有的标签
根据您的要求使用其中之一。
在新窗口或选项卡中打开链接文档:
<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