直接设置 target="_blank" 可实现新窗口打开,但必须配 rel="noopener noreferrer" 防安全风险;禁用 全局控制,推荐 js 筛选外链添加属性。

直接设置 target="_blank" 就能新窗口打开
绝大多数情况下,给 <a></a> 标签加上 target="_blank" 属性即可实现新窗口(或新标签页)打开链接。浏览器默认行为由用户设置决定:Chrome/Firefox 通常开新标签页,部分旧版 IE 可能弹新窗口。
常见错误是漏写引号或拼错值,比如写成 target=_blank(无引号)或 target="blank"(少下划线),这两种都无效,链接仍会在当前页跳转。
-
target="_blank"是唯一标准值,大小写敏感,必须带双下划线 - 不要用
target="new"、target="window"等自定义值,它们不会触发新窗口 - 若链接已含其他属性(如
rel),target放哪都行,顺序不影响功能
rel="noopener noreferrer" 必须跟 target="_blank" 一起用
只加 target="_blank" 存在安全风险:新页面可通过 window.opener 访问原页面的 window 对象,可能被用于钓鱼或性能攻击。现代实践强制要求配对使用 rel 属性。
正确写法是:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
-
noopener切断window.opener引用,防止新页面控制原页面 -
noreferrer进一步阻止Referer头发送,兼顾隐私与安全 - 如果只需安全隔离,
rel="noopener"已足够;加noreferrer是更保守的选择 - 不要只写
rel="noreferrer"而漏掉noopener,旧版 Safari 不支持它,仍存在 opener 风险
用 JavaScript 动态设置 target 要注意时机和覆盖逻辑
如果链接是动态生成或需根据条件切换打开方式(比如内部链接当前页、外部链接新窗口),不能只靠 HTML 属性,得用 JS 控制。
关键点在于:JS 设置必须在元素插入 DOM 后执行,且要确保不被后续代码意外覆盖。
- 用
element.setAttribute('target', '_blank')或直接赋值element.target = '_blank'都可以 - 若链接已有
target值(比如"_self"),JS 赋值会覆盖它,无需先removeAttribute - 避免在循环中反复操作同一元素的
target,容易因异步延迟导致状态错乱 - 配合
rel时,也要同步设置:element.rel = 'noopener noreferrer'
全局控制所有外链新窗口?慎用 <base target>
有人想“一劳永逸”,给整个页面加 <base target="_blank">。这确实会让所有相对链接默认新窗口打开,但副作用极强,基本不推荐。
问题在于:<base> 会影响页面内**所有**相对 URL,包括 CSS @import、图片 src、表单 action,甚至 fetch() 的相对路径——只要没显式指定协议或根路径,都会被强制套上 target="_blank",而这些根本不需要也不支持 target。
- 只有明确需要统一处理的纯导航页(且无任何其他资源引用)才考虑
<base> - 更稳妥的做法是用 JS 批量筛选
a[href^="http"]并逐个添加target和rel -
<base>的target值无法被单个链接的target="_self"完全覆盖,行为不直观
真正麻烦的不是怎么写 target="_blank",而是忘记配 rel="noopener",或者误以为加了就能一劳永逸。安全性和上下文适配,比语法本身更值得花时间检查。











