HTML的a标签的target属性有哪些值？如何打开新窗口？

target属性设置为\_blank可打开新窗口或新标签页。html的a标签的target属性有四个预定义值：\_self（默认值，当前标签页打开）、\_blank（新标签页打开，需配合rel="noopener noreferrer"使用以防止安全漏洞和性能问题）、\_parent（用于iframe结构，在父框架中加载）和\_top（跳出所有框架，在顶层加载）。此外，还可通过自定义框架名称控制加载位置；除target属性外，也可用javascript的window.open()方法、用户行为（如中键点击）、或标签控制链接打开方式。最佳实践包括：外部链接使用\_blank并搭配rel属性，避免滥用\_blank以免影响用户体验，确保安全性与可访问性。

HTML的a标签的target属性主要有四个预定义值：_self、_blank、_parent和_top。要打开新窗口或新标签页，你需要将target属性设置为_blank。

解决方案

target属性，说白了，就是告诉浏览器你这个链接点下去，内容要在哪里显示。这是个看似简单却又充满学问的属性，用好了能极大提升用户体验，用不好则可能带来困扰，甚至安全隐患。

它的核心作用是指定链接文档的加载位置。我们一个一个来看它的值：

立即学习“前端免费学习笔记（深入）”；

• _self: 这是默认值，如果你不写target属性，它就是这个效果。链接会在当前浏览上下文（也就是当前标签页或窗口）中打开。对我来说，这是最常用也最安全的选项，尤其对于站内导航，你绝不希望用户点一下就跳到新标签页，那样会很快堆满他们的浏览器。
• _blank: 这是你想要打开新窗口或新标签页时的选择。当用户点击带有target="_blank"的链接时，浏览器会打开一个新的空白浏览上下文来加载链接内容。这在处理外部链接时非常常见，比如你想引用一篇外部文章，又不想用户离开你的网站，这时候_blank就派上用场了。不过，这里面有个大坑，后面我们会详细聊聊。
• _parent: 这个值主要用在框架（）结构中。它会使链接在当前框架的直接父级框架集中加载。如果当前文档没有父级框架，那么它的行为就和_self一样。说实话，现在纯粹的frameset页面已经很少见了，但依然活跃，所以这个值在某些特定场景下还是有用的。
• _top: 同样是针对框架结构。它会使链接在最顶层的浏览上下文（也就是整个浏览器窗口，跳出所有框架）中加载。如果当前文档本身就是最顶层的，那它也和_self行为一致。当你被困在多层嵌套的iframe里，想跳出来时，_top就是你的救星。

除了这些预定义值，你还可以给target属性指定一个自定义的框架名称。比如，如果你页面上有一个，那么你可以写，这样page.html就会在名为myFrame的iframe里打开。这在一些旧系统或者特定布局中偶尔能见到。

为什么给_blank加上rel="noopener noreferrer"几乎是强制性的？

你可能经常看到，很多网站在target="_blank"的链接后面，还会加上rel="noopener noreferrer"。这可不是什么可有可无的装饰品，而是现代Web开发中一个非常重要的安全和性能最佳实践。对我来说，这几乎已经成了条件反射，只要写_blank，就一定会带上它。

这背后的原因主要有两点：

1. 安全漏洞（window.opener攻击）： 当一个链接通过target="_blank"打开新标签页时，新打开的页面可以通过window.opener属性访问到原始页面（也就是你的网站）的Window对象。这意味着，恶意网站可以在新标签页中运行JavaScript代码，通过window.opener.location.replace()来改变你原始页面的URL，从而实现钓鱼攻击。用户可能根本没察觉到你的页面URL被替换了，然后输入敏感信息。这听起来有点吓人，但确实是真实存在的威胁。

2. 性能问题： 即使没有恶意攻击，window.opener的存在也会让新打开的页面和原始页面之间建立一个进程连接。如果新页面执行了大量的JavaScript代码，或者有很重的计算任务，它可能会占用更多的系统资源，甚至拖慢原始页面的性能。这对于用户体验来说是不可接受的。

rel="noopener noreferrer"正是用来解决这些问题的：

• noopener: 这个关键字会阻止新打开的页面通过window.opener属性访问原始页面。它有效地切断了两个页面之间的联系，从而防止了上述的安全漏洞。
• noreferrer: 这个关键字的作用更进一步。它不仅包含了noopener的功能，还会阻止浏览器在导航到新页面时发送Referer（注意是单R）HTTP头。Referer头通常会告诉目标网站用户是从哪个页面跳转过来的。noreferrer可以增强用户隐私，因为它不会泄露你网站的来源信息给外部网站。

所以，当你需要打开一个新标签页，特别是链接到外部网站时，务必加上rel="noopener noreferrer"。它就像是给你的链接加了一道安全锁。

代码示例：

Open Voice OS

OpenVoiceOS是一个社区驱动的开源语音AI平台

下载

    阅读更多外部文章

除了target属性，还有哪些方式可以控制链接的打开行为？

虽然target属性是控制链接打开行为最直接、最HTML原生的方式，但在实际开发中，我们还有其他一些手段，它们各有优缺点，适用于不同的场景。

1. JavaScript的window.open()方法： 这是最灵活的方式，因为它给了你更多的控制权。你可以指定新窗口的URL、名称、尺寸（宽度、高度）、位置，甚至是否显示工具栏、菜单栏、状态栏等。

   document.getElementById('myLink').addEventListener('click', function(event) {
       event.preventDefault(); // 阻止默认的链接跳转行为
       window.open('https://example.com/new-page', '_blank', 'width=800,height=600,scrollbars=yes,resizable=yes');
   });

   我的看法：虽然强大，但window.open()常常被浏览器的弹窗拦截器（Pop-up Blocker）无情地阻止。所以，除非你是要打开一个特定的、用户明确期望的弹出窗口（比如一个登录框、一个图片预览），否则不建议用它来替代普通的target="_blank"。用户体验上，突如其来的弹窗往往是负面的。

2. 用户行为（鼠标中键、Ctrl/Cmd + 点击）： 这是最被低估但又最强大的“控制”方式。用户对自己的浏览器拥有绝对的控制权。大多数浏览器都支持：

   • 鼠标中键点击链接：在新标签页中打开链接。
   • Ctrl (Windows/Linux) 或 Cmd (macOS) + 左键点击链接：在新标签页中打开链接。
   • 右键点击链接 -> 选择“在新标签页中打开”：手动选择在新标签页中打开。 作为开发者，我们无法阻止用户这样做，也无需阻止。这反而是用户自定义浏览体验的重要方式。

3. 标签： 这是一个相对不那么常用的HTML标签，但它确实能影响链接的打开行为。将放在HTML文档的部分，可以为页面上的所有相对URL（包括标签的href）设置一个默认的target。

   
       
   
   
       关于我们 
   

   我的看法：我个人很少使用。它会强制页面上所有链接都在新标签页打开，包括内部链接，这通常会给用户带来混乱和不便。只有在极少数的、非常特殊的单页应用或特定框架中，我才会考虑它。通常，最好是显式地在每个需要新标签页的链接上设置target="_blank"。

总的来说，对于日常的链接行为控制，target属性依然是主力。JavaScript是补充，而用户行为则是最终决定权。

在现代Web开发中，target属性的使用场景和最佳实践是什么？

在当前Web开发语境下，target属性的使用不再是简单的“打开新页面”那么粗暴，它更多地关乎用户体验、安全性和网站的整体架构。我的经验是，要用得恰到好处，既不打扰用户，又能达到设计目的。

常见使用场景：

1. 外部链接 (External Links)： 这是target="_blank"最主要、最合理的用武之地。当你的网站引用了外部资源、文章、或者链接到合作伙伴的网站时，你通常希望用户在访问这些外部内容的同时，你的网站页面依然保持打开状态。这可以避免用户“流失”到外部网站后，忘记或懒得返回你的网站。

   • 最佳实践：始终结合rel="noopener noreferrer"使用，这是安全底线。同时，可以考虑在链接旁添加一个视觉提示（比如一个外部链接图标 ↗），告诉用户这个链接会打开新标签页，增加透明度。

2. 下载链接 (Download Links)： 虽然现在有download属性可以直接触发下载，但在某些情况下，你可能仍然希望点击下载链接时，页面不跳转，而是直接在新标签页中开始下载。

   • 最佳实践：如果文件是直接可下载的（例如PDF、ZIP），优先使用download属性。如果需要跳转到一个下载页面，或者下载行为比较复杂，可以考虑_blank。同样，noopener noreferrer是标配。

3. Iframe内链接 (Links within Iframes)： 在嵌入式内容（如视频播放器、第三方小部件）中，链接的行为变得复杂。

   • _parent 或 _top：当你在iframe内部有一个链接，并且希望这个链接能够跳出iframe，在父级窗口或最顶层窗口打开时，这两个值就非常有用。这在用户需要从嵌入内容回到主站时很有用。
   • 自定义框架名：如果你的页面有多个命名的iframe，你可以让一个iframe里的链接在另一个特定的iframe里打开。这在一些复杂的仪表板或多区域布局中可能会用到。
   • 最佳实践：对于iframe内部的链接，如果它们是内部导航，通常应该保持在iframe内部。如果它们指向主站或外部资源，则应根据需要决定是跳出iframe还是在新标签页打开。

不建议使用target="_blank"的场景：

• 内部导航 (Internal Navigation)： 这是最常见的滥用场景。用户期望点击站内链接时，页面就在当前标签页中刷新。如果每次点击内部链接都打开新标签页，用户的浏览器会很快被几十个你的网站标签页淹没，这会让他们感到沮丧，甚至直接关闭你的网站。除非是特定的、完全独立的子功能（比如一个在线编辑器），否则避免对内部链接使用_blank。

总结最佳实践：

• 用户体验优先：永远考虑用户的预期。他们希望链接在哪里打开？如果不是外部链接，通常就不应该打开新标签页。
• 安全不妥协：target="_blank"与rel="noopener noreferrer"是黄金搭档，不可分离。
• 清晰的提示：如果链接会打开新标签页，考虑通过视觉元素（如小图标）或aria-label属性来告知用户，提高可访问性。
• 避免过度使用：少即是多。新标签页的滥用会造成混乱。
• 测试兼容性：不同浏览器对target属性和新窗口行为的处理可能略有差异，务必在主流浏览器上进行测试。

最终，target属性的选择，是关于平衡用户便利性、网站结构和安全性的艺术。它是一个小细节，却能反映出你对用户体验的重视程度。