最安全写法是target="_blank"配合rel="noopener",可选rel="noreferrer";合法值还有"_self"、"_parent"、"_top";失效常见于sandbox限制、JS拦截或PWA环境。

target="_blank" 是最常用但不是最安全的写法
直接写 target="_blank" 确实能打开新窗口或新标签页,但现代浏览器默认会在新上下文中打开链接,导致 window.opener 指向原页面 —— 这会让新页面能通过 window.opener.location 反向跳转甚至执行脚本,存在安全风险(尤其对用户不可信的链接)。
正确做法是补全两个关键属性:
-
rel="noopener":切断新页面对原页面的引用,禁用window.opener -
rel="noreferrer"(可选):进一步阻止Referer头发送,隐私更强
安全打开
target 属性的其他合法值有哪些
target 不只认 "_blank",它匹配的是浏览器上下文名称(browsing context name),包括以下内置关键字:
-
"_self":在当前标签页打开(默认行为,显式写也无害) -
"_parent":在父的上下文中打开(若无父级则等同_self) -
"_top":在顶层窗口打开,会跳出所有嵌套 -
"_blank":新开上下文(由浏览器决定是新标签页还是新窗口)
注意:target 值区分大小写,"_BLANK" 无效;自定义名称如 "myWindow" 也可用,但重复使用时会复用已有同名窗口 —— 这点常被误用于“始终在同一个新窗口打开”,但实际兼容性差、行为不一致,不推荐。
立即学习“前端免费学习笔记(深入)”;
为什么有时点击没反应?常见 target 相关错误
以下情况会导致 target 失效或行为异常:
- 页面启用了
sandbox属性(如 iframe 中),且未声明allow-popups权限 - 链接被 JavaScript 阻止了默认行为(例如
event.preventDefault()后没手动window.open()) - 在某些 PWA 或 WebView 环境中,
target="_blank"被强制降级为_self(需检查运行环境限制) - Chrome 扩展或广告拦截插件主动屏蔽了新窗口打开逻辑
调试建议:右键链接 → “在新标签页中打开”,如果能成功,说明是 HTML 层面问题;如果也不行,大概率是环境或脚本干预。
window.open() 和 target 属性的本质区别
target 是声明式、纯 HTML 的导航控制,而 window.open() 是命令式、JS 控制的窗口管理,二者能力不同:
-
target无法指定窗口尺寸、位置、是否显示工具栏等 —— 这些在现代浏览器中已被忽略或禁用(出于安全和用户体验) -
window.open()在跨域 iframe 或某些移动端 WebView 中可能被完全禁用(返回null) -
window.open()打开的窗口默认拥有window.opener引用,必须手动加opener: null选项才等效于rel="noopener"
const win = window.open("https://example.com", "_blank", "noopener");
注意:"noopener" 是 Chrome/Edge/Firefox 支持的特性字符串(非标准但广泛支持),更稳妥写法是先打开再立即断开:
const win = window.open("https://example.com");
if (win) win.opener = null;
真正需要精确控制窗口行为的场景越来越少,多数情况下,老老实实用带 rel="noopener" 的 target="_blank" 更可靠。










