_blank链接需加rel=”noopener noreferrer”以防止安全风险，_parent在父框架打开，_top跳出所有框架，framename在指定框架打开，javascript可用window.open()动态控制；1. 使用_blank时必须添加rel=”noopener noreferrer”防止tabnabbing攻击；2. _parent将链接内容加载到直接父级框架；3. _top强制在顶层浏览上下文中打开链接；4. framename在指定name的iframe中打开，若不存在则新建；5. 通过window.open()可动态控制打开方式，但需用户触发以避免弹窗拦截；6. 动态修改a标签target属性可实现条件性跳转策略；这些机制共同决定了链接的导航行为和安全性，正确使用能提升用户体验与网站安全，最终应根据场景选择合适的方式并始终关注安全最佳实践。
HTML链接的
target
属性，说白了，就是告诉浏览器这个链接点下去之后，内容应该在哪里显示。它决定了是在当前页面、新开一个标签页、还是在某个特定的框架里打开。理解这些值，能帮助我们更好地控制用户体验和页面结构。
解决方案
target
属性主要有以下几个预定义的值，以及一种自定义方式：
_self
: 这是默认值。链接会在当前浏览器上下文（也就是你正在看的那个标签页或窗口）中打开。如果你不写
target
属性，链接行为就是这样。
_blank
: 这个值会强制链接在一个新的浏览器上下文（通常是新的标签页或窗口）中打开。
_parent
: 如果你的页面嵌入在框架（
或已废弃的
）中，
_parent
会尝试在当前框架的直接父级框架中打开链接。如果没有父级框架，它的行为就和
_self
一样。
_top
: 这个值是最“霸道”的。它会把链接内容加载到整个窗口的顶层浏览上下文，无论当前页面嵌套了多少层框架，它都会跳出所有框架，在整个浏览器窗口中显示。如果页面本身就没有框架，那它也和
_self
一样。
framename
: 你可以指定一个自定义的框架名称（比如一个
的
name
属性值）。链接会尝试在这个指定名称的框架中打开。如果找不到这个名称的框架，浏览器会新开一个标签页/窗口，并给它赋予这个名称，然后在这个新开的窗口中加载链接内容。
_blank
_blank
链接的新标签页打开，真的安全吗？
用
_blank
来让链接在新标签页打开，这是最常见的做法之一。我们经常希望用户在点击外部链接时，不离开当前网站，所以就习惯性地加上
target="_blank"
。这看起来很方便，但实际上，如果使用不当，它会带来一些潜在的安全风险，尤其是一个叫做“Tabnabbing”的问题。
立即学习“前端免费学习笔记（深入）”；
简单来说，当你在一个新标签页打开一个链接时，那个新标签页的JavaScript可以通过
window.opener
对象访问到你的原始页面。这意味着，恶意的网站可以利用这个连接，改变你原始页面的URL，比如伪装成一个登录页面，诱骗你输入凭据。这听起来有点吓人，对吧？
所以，一个非常重要的最佳实践是，在使用
target="_blank"
时，同时加上
rel="noopener noreferrer"
属性。
noopener
: 这个属性会阻止新打开的页面通过
window.opener
访问到你的原始页面。这是防止Tabnabbing攻击的关键。
noreferrer
: 这个属性除了
noopener
的功能外，还会阻止浏览器在新页面请求时发送Referer头信息。这意味着新页面不会知道你从哪个页面跳转过来的，增加了用户的隐私性。
在我看来，很多开发者在用
_blank
的时候，根本没意识到这个安全隐患，或者说，他们只知道要加
rel="noopener"
，但没细想过为什么。这是一个很小的细节，但对用户安全来说却非常重要。每次看到没加这两个属性的
_blank
链接，我都会有点强迫症地想去加上。
_parent
_parent
和
_top
：框架世界里的导航策略
虽然现代网页设计中，
frameset
已经基本被淘汰了，但
的使用依然非常普遍，比如嵌入视频、地图、广告，或者构建一些微前端应用。在这种多框架的场景下，
_parent
和
_top
就显得很有用了。
想象一下一个页面结构：主页面（top）里嵌入了一个
iframeA
，而
iframeA
里又嵌入了一个
iframeB
。现在，如果
iframeB
里的一个链接被点击：
如果链接的
target
是
_parent
，那么这个链接的内容就会加载到
iframeA
中。它只会影响当前框架的直接上级。如果链接的
target
是
_top
，那么这个链接的内容就会跳出
iframeA
和
iframeB
，直接加载到最外层的主页面（top）中。它会“冲破”所有的框架层级。
它们的区别就在于“作用范围”：
_parent
只影响一层，而
_top
是直接回到最顶层。
在实际应用中，
_parent
可能在一些需要局部刷新但又不希望影响整个页面的场景下用到，比如一个嵌入式的后台管理面板，你希望某个操作结果在父级面板里显示。而
_top
则更常用于“跳出框架”的场景，例如，一个嵌入式的登录页面，用户登录成功后，你希望整个主页面都跳转到用户中心，而不是仅仅在iframe里刷新。我个人在使用
时，如果需要从子框架跳转到主站的某个页面，几乎都会毫不犹豫地使用
_top
，这能确保用户体验的一致性，避免页面被“困”在小小的框架里。
JavaScript如何动态控制链接打开方式？
有时候，我们不能简单地在HTML里写死
target
属性，因为链接的打开方式可能需要根据用户行为、数据状态或者其他逻辑来动态决定。这时候，JavaScript就派上用场了。
最直接的方法是使用
window.open()
方法。这个方法非常强大，它允许你打开一个新的浏览器窗口或标签页，并且可以精确控制这个新窗口的各种特性，比如大小、是否显示滚动条、菜单栏等等。
window.open(URL, windowName, [windowFeatures])
URL
: 要打开的链接地址。
windowName
: 这个参数非常关键，它其实就对应了HTML链接
target
属性的值。你可以传入
_blank
、
_self
、
_parent
、
_top
，或者任何自定义的框架名称。
windowFeatures
: 一个逗号分隔的字符串，用于定义新窗口的特性，比如
'width=800,height=600,scrollbars=yes'
。
示例代码：
假设你有一个按钮，点击后需要根据某些条件决定是新开窗口还是在当前页面跳转：
document.getElementById('dynamicLinkBtn').addEventListener('click', function() { const url = 'https://www.example.com/some-page'; const shouldOpenInNewTab = confirm('要在新标签页打开吗？'); // 模拟一个条件判断 if (shouldOpenInNewTab) { // 在新标签页打开，并指定一些窗口特性 window.open(url, '_blank', 'width=1024,height=768,resizable=yes,scrollbars=yes'); } else { // 在当前页面打开 window.location.href = url; // 或者 window.open(url, '_self'); }});
当然，你也可以通过JavaScript来动态修改现有
标签的
target
属性：
document.getElementById('myAnchorTag').addEventListener('click', function(event) { // 假设这个链接原本没有target属性 if (Math.random() > 0.5) { // 随机决定是否新开 this.setAttribute('target', '_blank'); this.setAttribute('rel', 'noopener noreferrer'); // 别忘了这个！ } else { this.removeAttribute('target'); this.removeAttribute('rel'); } // 让链接的默认行为继续执行});
在使用
window.open()
时，需要特别注意浏览器的弹窗拦截器。很多浏览器默认会拦截非用户触发的
window.open()
调用。所以，最好是响应用户的点击事件来调用它。对我来说，如果只是简单的新标签页，我还是倾向于直接在HTML里写
target="_blank"
和
rel="noopener noreferrer"
，代码更简洁，也更符合语义。JavaScript的介入，通常是当我需要更精细的控制，比如打开一个特定尺寸的辅助窗口，或者在用户确认后才执行跳转逻辑时。
以上就是HTML链接的target属性有哪些值？各有什么作用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1570960.html
微信扫一扫 
支付宝扫一扫 
