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

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

解决方案

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

在使用

window.open()

时，需要特别注意浏览器的弹窗拦截器。很多浏览器默认会拦截非用户触发的

window.open()

调用。所以，最好是响应用户的点击事件来调用它。对我来说，如果只是简单的新标签页，我还是倾向于直接在HTML里写

target="_blank"

和

rel="noopener noreferrer"

，代码更简洁，也更符合语义。JavaScript的介入，通常是当我需要更精细的控制，比如打开一个特定尺寸的辅助窗口，或者在用户确认后才执行跳转逻辑时。

以上就是HTML链接的target属性有哪些值？各有什么作用？的详细内容，更多请关注php中文网其它相关文章！