HTML怎么在新窗口打开链接_html target=_blank用法【方法】

HTML怎么在新窗口打开链接_html target=_blank用法【方法】

想让链接在新标签页里打开？target="_blank" 这个属性你肯定不陌生。但这里有个关键点：它可不是“加上就万事大吉”了。如果少了 rel="noopener" 这个搭档，安全和性能上都会埋下隐患。

为什么 target="_blank" 单独用有风险

过去常见的写法 链接，其实暗藏玄机。这么写，新打开的页面可以通过 window.opener 这个接口，完全访问并操纵原页面的 window 对象。这意味着什么？想象一下，如果目标站点不够友好，它完全可以执行一段像 window.opener.location = "https://evil.com" 这样的代码，从而劫持你的原页面。更不用说，在同源的情况下，它甚至能读取你的 DOM 或 Cookie。除此之外，这种旧式写法还会让新页面阻塞原页面的主线程，直接影响页面性能。

rel="noopener" 必须跟上，rel="noreferrer" 视需补充

所以，现代的安全写法是必须加上 rel="noopener" 的：

安全打开

这个 rel="noopener" 属性，作用就是切断新页面通过 window.opener 引用原页面的通道，从而彻底堵上安全漏洞，也解决了性能拖累的问题。如果出于某些考虑，你希望进一步隐藏来源信息（比如不向目标网站发送 Referer 请求头），可以再叠加一个 rel="noreferrer" 属性。

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

• rel="noopener"：这是必备项，核心解决安全和性能问题。
• rel="noreferrer"：这是可选项。它相当于同时设置了 rel="noopener nofollow"，但副作用是会丢失 Referer 信息，可能影响网站的分析统计。
• 需要警惕的是，不要只写 rel="noreferrer" 而漏掉 noopener。因为在 Safari 浏览器的某些旧版本中，对 noreferrer 的支持并不完整，window.opener 的引用可能依然存在。

兼容性与浏览器差异要注意

target="_blank" 本身的兼容性极好，所有浏览器都支持。但它的黄金搭档 rel="noopener" 在 IE 浏览器（IE11 及以下版本）中却得不到支持——不过好消息是，这些浏览器会直接忽略该属性，不会导致错误。如果你的项目必须兼容 IE，可以这么办：

• 首先，重新评估业务是否真的还需要支持 IE。
• 如果必须支持，可以考虑用 Ja vaScript 动态打开窗口：window.open(url, '_blank', 'noopener')（注意：这里的 noopener 是 window.open 方法的特性字符串参数，不是 HTML 属性）。
• 至于现代浏览器，如 Chrome、Firefox、Edge 以及 Safari 12.1+ 都已完整支持 rel="noopener"。
• 另外，部分内容管理系统（CMS）或富文本编辑器可能会自动过滤掉 rel 属性，部署前务必检查最终的 HTML 输出，或在后端配置好属性白名单。

别忽略 target="_blank" 对用户体验的影响

技术实现是一方面，用户体验同样不容忽视：

• 对于使用屏幕阅读器的视障用户，虽然会听到“在新窗口中打开”的提示，但如果链接没有视觉上的明确标识（比如一个代表外链的小图标或文字说明），他们的体验依然是不完整的。
• 在移动端，比如 Safari，链接虽然会在新标签页打开，但用户通过手势返回时容易迷失。因此，建议只对明确需要离开当前流程的链接使用此属性，比如文档下载、跳转到第三方服务登录等场景。
• 切忌对站内导航链接滥用 target="_blank"。这违背了用户的操作预期，让他们无法通过“后退”按钮返回，同时也不利于搜索引擎优化（SEO）。

说到底，真正的要点不在于“怎么写”这段代码，而在于“为什么要这样组合”。一个漏掉了 rel="noopener" 的 target="_blank"，就好比只锁了门却忘了关窗，表面看似安全，实则留下了后门。