HTML链接的target属性有哪些值？各有什么作用？-小浪学习网

_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属性有哪些值？各有什么作用？

html链接的

target

属性，说白了，就是告诉浏览器这个链接点下去之后，内容应该在哪里显示。它决定了是在当前页面、新开一个标签页、还是在某个特定的框架里打开。理解这些值，能帮助我们更好地控制用户体验和页面结构。

解决方案

target

属性主要有以下几个预定义的值，以及一种自定义方式：

_self

: 这是默认值。链接会在当前浏览器上下文（也就是你正在看的那个标签页或窗口）中打开。如果你不写
target
属性，链接行为就是这样。
_blank

: 这个值会强制链接在一个新的浏览器上下文（通常是新的标签页或窗口）中打开。
_parent

: 如果你的页面嵌入在框架（
<iframe>
或已废弃的
```
<frameset>
```
）中，
_parent
会尝试在当前框架的直接父级框架中打开链接。如果没有父级框架，它的行为就和
_self
一样。
_top

: 这个值是最“霸道”的。它会把链接内容加载到整个窗口的顶层浏览上下文，无论当前页面嵌套了多少层框架，它都会跳出所有框架，在整个浏览器窗口中显示。如果页面本身就没有框架，那它也和
_self
一样。
framename

: 你可以指定一个自定义的框架名称（比如一个
<iframe>
的
```
name
```
属性值）。链接会尝试在这个指定名称的框架中打开。如果找不到这个名称的框架，浏览器会新开一个标签页/窗口，并给它赋予这个名称，然后在这个新开的窗口中加载链接内容。

_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

和

_top

：框架世界里的导航策略

虽然现代网页设计中，

frameset

已经基本被淘汰了，但

<iframe>

的使用依然非常普遍，比如嵌入视频、地图、广告，或者构建一些微前端应用。在这种多框架的场景下，

_parent

和

_top

就显得很有用了。

想象一下一个页面结构：主页面（top）里嵌入了一个

iframeA

，而

iframeA

里又嵌入了一个

iframeB

。现在，如果

iframeB

里的一个链接被点击：

如果链接的
target
是
_parent
，那么这个链接的内容就会加载到
iframeA
中。它只会影响当前框架的直接上级。
如果链接的
target
是
_top
，那么这个链接的内容就会跳出
iframeA
和
```
iframeB
```
，直接加载到最外层的主页面（top）中。它会“冲破”所有的框架层级。

它们的区别就在于“作用范围”：

_parent

只影响一层，而

_top

是直接回到最顶层。

在实际应用中，

_parent

可能在一些需要局部刷新但又不希望影响整个页面的场景下用到，比如一个嵌入式的后台管理面板，你希望某个操作结果在父级面板里显示。而

_top

则更常用于“跳出框架”的场景，例如，一个嵌入式的登录页面，用户登录成功后，你希望整个主页面都跳转到用户中心，而不是仅仅在iframe里刷新。我个人在使用

<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来动态修改现有

<a>

标签的

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');     }     // 让链接的默认行为继续执行 });

在使用