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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17711146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:15:41  来源:igfitidea点击:

How to open link in new tab on html?

htmlhyperlinkanchorbrowser-tab

提问by ZenthyxProgramming

I'm working on an HTML project, and I can't find out how to open a link in a new tab without javascript.

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

I already know that <a href="http://www.WEBSITE_NAME.com"></a>opens the link in same tab. Any ideas how to make it open in a new one?

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

回答by SharkofMirkwood

Set the 'target' attribute of the link to _blank:

将链接的“目标”属性设置为_blank

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

Edit: for other examples, see here: http://www.w3schools.com/tags/att_a_target.asp

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

(Note: I previously suggested blankinstead of _blankbecause, if used, it'll open a new tab and then use the same tab if the link is clicked again. However, this is only because, as GolezTrol pointed out, it refers to the name a of a frame/window, which would be set and used when the link is pressed again to open it in the same tab).

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

Security Consideration!

安全考虑!

The rel="noopener noreferrer"is to prevent the newly opened tab from being able to modify the original tab maliciously. For more information about this vulnerability see these resources:

rel="noopener noreferrer"是为了防止新开启的分页从能够恶意修改原来的标签。有关此漏洞的更多信息,请参阅以下资源:

回答by Learner Always

Use one of these as per your requirements.

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

Open the linked document in a new window or tab:

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

 <a href="xyz.html" target="_blank"> Link </a>

Open the linked document in the same frame as it was clicked (this is default):

在单击时在同一框架中打开链接文档(这是默认设置):

 <a href="xyz.html" target="_self"> Link </a>

Open the linked document in the parent frame:

在父框架中打开链接的文档:

 <a href="xyz.html" target="_parent"> Link </a>

Open the linked document in the full body of the window:

在整个窗口中打开链接的文档:

 <a href="xyz.html" target="_top"> Link </a>

Open the linked document in a named frame:

在命名框架中打开链接文档:

 <a href="xyz.html" target="framename"> Link </a>

See MDN

见 MDN

回答by Cyberquill

If you would like to make the command once for your entire site, instead of having to do it after every link. Try this place within the Head of your web site and bingo.

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

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

hope this helps

希望这可以帮助

回答by Evan Hahn

Use target="_blank":

使用target="_blank"

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

回答by Kaleem Ullah

When to use target='_blank':

何时使用target='_blank'

The HTML version (Some devices not support it):

HTML 版本(部分设备不支持):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

The JavaScript version for all Devices :

所有设备的 JavaScript 版本:

The use of rel="external" is perfectly valid

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

and for Jquery can try with the below one:

对于 Jquery,可以尝试使用以下方法:

$("#content a[href^='http://']").attr("target","_blank");

If browser setting don't allow you to open in new windows :

如果浏览器设置不允许您在新窗口中打开:

href = "google.com";
onclick="window.open (this.href, ''); return false";

回答by Vadym P

target="_blank"attribute will do the job. Just don't forget to add rel="noopener noreferrer"to solve the potential vulnerability. More on that here: https://dev.to/ben/the-targetblank-vulnerability-by-example

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>

回答by Thabang

You can use:

您可以使用:

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

However the above make your site vulnerable to phishing attacks. You can prevent it from happening in some browsers by adding rel="noopener noreferrer" to your link. With this added, the above example becomes:

但是,上述情况会使您的网站容易受到网络钓鱼攻击。您可以通过在链接中添加 rel="noopener noreferrer" 来防止它在某些浏览器中发生。加上这个,上面的例子变成了:

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

check out for more information: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

查看更多信息:https: //www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

回答by darmis

You could do it like this:

你可以这样做:

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

Also look at the following url on MDNfor more information about security and privacy:

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

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

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

which in turn has a link to a good article named Target="_blank" - the most underestimated vulnerability ever:

这反过来又链接到一篇名为Target="_blank"的好文章——有史以来最被低估的漏洞

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

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