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

target="_blank" 必须搭配 rel="noopener" 使用，否则新页面可通过 window.opener 劫持原页面并阻塞主线程；rel="noreferrer" 可选，用于隐藏 Referer，但不可替代 noopener。

target="_blank" 是让链接在新标签页打开的最直接方式，但它不是“加了就完事”，不加 rel="noopener" 会带来安全与性能隐患。

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

旧写法 <a href="https://example.com" target="_blank">链接</a> 会让新页面通过 window.opener 完全访问原页面的 window 对象——这意味着对方页面能调用 window.opener.location = "https://evil.com" 劫持你的页面，还能读取你的 DOM 或 Cookie（尤其在同源时）。同时，新页面会阻塞原页面的主线程，影响性能。

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

现代写法必须包含 rel="noopener"：

<a href="https://example.com" target="_blank" rel="noopener">安全打开</a>

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 支持；若必须，可 JS 动态打开：window.open(url, '_blank', 'noopener')（注意：此处的 noopener 是 window.open 的 features 字符串参数，非 HTML 属性）
• Chrome、Firefox、Edge、Safari 12.1+ 均完整支持 rel="noopener"
• 部分 CMS 或富文本编辑器会自动过滤 rel 属性，需检查输出源或后端白名单配置

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

用户习惯和可访问性也得兼顾：

• 屏幕阅读器会播报 “在新窗口中打开”，但若没视觉提示（如外链图标或文字标注），视障用户可能不知情
• 移动端 Safari 默认在新标签页打开，但用户手势返回时容易迷路；建议仅对明确需要跳转离开当前流程的链接使用（如文档下载、第三方服务登录）
• 不要给站内导航链接滥用 target="_blank" —— 这违背用户预期，且不利于 SEO

真正关键的不是“怎么写”，而是“为什么写这个组合”；漏掉 rel="noopener" 的 target="_blank" 就像开着门锁着窗，看似安全，实则留了后门。