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


390

我正在处理HTML项目,但是我不知道如何在没有JavaScript的情况下在新标签页中打开链接。

我已经知道可以<a href="http://www.WEBSITE_NAME.com"></a>在同一选项卡中打开链接。有什么想法如何使其在新的环境中打开吗?


40
使用<a href="url" target="_blank">...</a>
Rohit Agrawal

1
如Rohit所说,添加参数target =“ _ blank”,但是,至少在FireFox上,如果您执行两个下划线target =“ __ blank”,它将在新标签页中打开,但是使用相同的双下划线单击其他链接会打开新的前一个新标签页中的页面,这意味着您仅可以打开一个附加标签。
贾斯汀·莱文

Answers:


599

将链接的“目标”属性设置为_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"是为了防止新开启的分页从能够恶意修改原来的标签。有关此漏洞的更多信息,请参见以下资源:


16
特殊目标均以下划线开头。blank将是框架或窗口的名称。这似乎可行,因为当不存在名称为“空白”的新窗口或标签时,可能会打开一个新窗口或标签,但是第二次单击链接应再次在同一标签中打开该页面,而不是打开另一个标签。
GolezTrol

2
好吧,我想这不是无效的,只是不同而已。我认为,blank除了实际上还具有特殊含义之外,您不能很好地使用它。我找不到任何可以证明的信息。你可以吗?foo_blank
GolezTrol

2
@Stefan不,_blank会没事的;链接将分别在不同的标签中打开。如果您指定的名称没有下划线(例如blank),则链接将在同一选项卡中打开。
SharkofMirkwood 2015年

6
提示:请注意由于_blank而引起的漏洞。更多信息medium.com/@jitbit/…–阿尼斯
Aistis)'16

1
带有漏洞mathiasbynens.github.io/rel-noopener的另一页本身就是一个示例。
PhoneixS

99

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

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

 <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


谢谢你的信息。单击后如何在新选项卡中打开链接?
Shajeel Afzal

使用上面共享的html中的代码。大多数的新浏览器中打开默认情况下,一个新的选项卡中的链接时,您使用target =“_空白”
学习者始终

1
考虑到target="_blank"存在漏洞,您可以在mathiasbynens.github.io/rel-noopener中
PhoneixS

36

如果您想对整个站点执行一次命令,而不必在每个链接后都执行一次。在您的网站和Bingo头内尝试这个地方。

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

希望这可以帮助


3
不要忘记添加rel =“ noopener noreferrer”
Blundering Philosopher


6

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

1
不要忘记添加rel =“ noopener noreferrer”
Blundering Philosopher


2

您可以使用:

<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


0

您可以这样做:

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

另外,请查看MDN上的以下网址,以获取有关安全性和隐私权的更多信息:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#Security_and_privacy

反过来,该链接指向名为Target =“ _ blank”的好文章的链接-有史以来被低估的漏洞

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.