深入解析 `＜a＞` 标签的 `target` 属性

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_优快云博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

<a> 标签（锚点标签）是 HTML 中用于创建超链接的基本元素。除了定义链接的目标地址（通过 href 属性），<a> 标签还提供了 target 属性，用于控制链接在浏览器中的打开方式。正确使用 target 属性可以提升用户体验并满足不同的交互需求。本文将详细介绍 <a> 标签的 target 属性的常见取值及其含义，并探讨其在实际开发中的应用场景。

二、target 属性的取值及含义

target 属性是一个字符串值，用于指定链接在浏览器中的打开方式。以下是常见的取值及其含义：

（一）_self（默认值）

• 含义：在当前窗口或标签页中加载目标文档。
• 示例：

  <a href="https://example.com" target="_self">访问示例网站</a>
  

• 解释：当用户点击链接时，目标页面会在当前窗口或标签页中打开，替换当前页面的内容。这是 target 属性的默认行为，即使不显式指定 target="_self"，链接也会按照这种方式打开。

（二）_blank

• 含义：在新窗口或标签页中打开目标文档。
• 示例：

  <a href="https://example.com" target="_blank">在新标签页中打开</a>
  

• 解释：这是最常用的 target 取值之一。当用户点击链接时，浏览器会打开一个新的窗口或标签页来加载目标页面，而当前页面保持不变。这种方式常用于外部链接，以避免用户离开当前网站。

（三）_parent

• 含义：在父级窗口或框架中加载目标文档。
• 示例：

  <a href="https://example.com" target="_parent">在父级窗口中打开</a>
  

• 解释：如果当前页面位于一个框架（<frame>）或嵌套的 <iframe> 中，_parent 会将目标页面加载到包含当前框架的父级窗口中。如果当前页面不在框架中，_parent 的行为与 _self 相同。

（四）_top

• 含义：在浏览器的最顶层窗口中加载目标文档。
• 示例：

  <a href="https://example.com" target="_top">在最顶层窗口中打开</a>
  

• 解释：与 _parent 类似，_top 会将目标页面加载到浏览器的最顶层窗口中，覆盖所有框架。如果当前页面不在框架中，_top 的行为也与 _self 相同。

（五）自定义目标名称

• 含义：指定一个自定义的目标窗口或框架名称。
• 示例：

  <a href="https://example.com" target="myWindow">打开到自定义窗口</a>
  

• 解释：通过指定一个自定义的目标名称（如 myWindow），可以将链接加载到一个特定的窗口或框架中。如果该目标窗口或框架尚未打开，浏览器会创建一个新窗口或框架，并将其命名为指定的名称。如果已经存在同名的窗口或框架，目标页面将加载到该窗口或框架中。

三、target 属性的使用场景

（一）在新标签页中打开外部链接

在开发中，我们通常希望用户在访问外部链接时不会离开当前网站。通过设置 target="_blank"，可以实现这一目标：

<a href="https://example.com" target="_blank">访问外部网站</a>

这种方式不仅提升了用户体验，还减少了用户误操作导致离开当前网站的风险。

（二）在框架中加载内容

在使用框架（<frame>）或嵌套的 <iframe> 时，target 属性可以控制内容在框架中的加载方式。例如：

<iframe name="myFrame" src="https://example.com"></iframe>
<a href="https://another-example.com" target="myFrame">加载到框架中</a>

点击链接时，目标页面将加载到名为 myFrame 的框架中。

（三）覆盖框架内容

如果需要在框架中加载内容，但希望某些链接能够覆盖整个框架，可以使用 target="_parent" 或 target="_top"。例如：

<iframe name="myFrame" src="https://example.com"></iframe>
<a href="https://another-example.com" target="_parent">在父级窗口中打开</a>

这种方式可以确保用户在框架中浏览时，某些重要页面能够覆盖整个框架，避免内容被限制在小窗口中。

四、target="_blank" 的安全性问题及解决方案

（一）问题

虽然 target="_blank" 是一个非常方便的属性，但它可能会带来一些安全问题。当用户点击链接并在新标签页中打开外部网站时，外部网站可能会通过 JavaScript 操作新标签页，甚至劫持用户的浏览器窗口。例如，恶意网站可能会关闭新标签页并打开一个钓鱼网站，从而欺骗用户。

（二）解决方案

为了避免这些问题，建议在使用 target="_blank" 时同时设置 rel="noopener noreferrer" 属性。rel="noopener" 确保新标签页无法通过 window.opener 属性访问原始页面，而 rel="noreferrer" 则不会向目标页面发送 HTTP Referer 头信息。示例如下：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全地打开新标签页</a>

通过这种方式，可以有效防止外部网站对用户浏览器的潜在攻击。

五、总结

<a> 标签的 target 属性是一个功能强大的工具，能够控制链接在浏览器中的打开方式。通过合理使用 target 属性的取值（如 _self、_blank、_parent、_top 和自定义目标名称），开发者可以满足不同的交互需求，提升用户体验。然而，在使用 target="_blank" 时，需要注意其可能带来的安全问题，并通过设置 rel="noopener noreferrer" 来确保安全性。通过掌握这些知识，开发者可以更好地利用 <a> 标签的 target 属性，构建更加友好和安全的网页。