target="_blank"需搭配rel="noopener noreferrer"防安全风险;_self、_parent、_top用于复用上下文但范围不同;自定义名称可复用窗口;form也支持target,适用于导出等场景。

target="_blank" 是最常用的新开窗口方式,但默认有安全风险
点击链接后在新标签页打开页面,用 target="_blank" 就行。但现代浏览器下,它会默认继承当前页面的 window.opener 引用,导致新页面能通过 window.opener.location 反向控制原页面——这是钓鱼和跳转劫持的常见入口。
安全写法必须搭配 rel="noopener noreferrer":
外部链接
-
rel="noopener"切断window.opener引用,防止新页篡改原页 -
rel="noreferrer"还会隐藏Referer头(可选,但推荐加) - 不加
rel="noopener"时,Chrome/Firefox 已在控制台警告
target="_self"、"_parent"、"_top" 的实际行为差异
这几个值都用于**复用已有上下文**,但作用范围不同:
-
target="_self":在当前或标签页内跳转(默认值,可省略) -
target="_parent":在父级中加载,若无父级则等同于_self -
target="_top":在顶层窗口(即最外层浏览器标签页)加载,会“跳出”所有嵌套
特别注意:_parent 和 _top 在单页应用或嵌入式场景中容易引发意外跳转,比如广告 iframe 里用了 target="_top",就可能让整个宿主页面被替换成广告落地页。
立即学习“前端免费学习笔记(深入)”;
自定义 target 名称(如 target="mywin")的真实用途
给 target 赋一个非保留字的名称(如 target="dashboard"),浏览器会查找是否存在同名的窗口或标签页;存在就复用,不存在就新建一个命名窗口。
- 适用于需要固定复用某个窗口的场景,比如后台管理系统的弹出式操作面板
- 注意:Safari 对命名窗口支持较弱,常降级为新建标签页
- 不能用空格、特殊字符或纯数字,合法示例:
target="log-panel",非法示例:target="log panel"或target="123" - 关闭该窗口后,下次再用相同 name 仍会新建,不会报错
target 属性在 form 表单中同样生效,但容易被忽略
很多人只记得 标签的 target,其实 也支持,且逻辑一致:
- 提交后响应内容会在新窗口显示,适合导出 CSV、生成 PDF 等无需刷新当前页的操作
- 如果后端返回的是重定向(
302),目标窗口会跳转到重定向地址,原页面不受影响 - 不支持
fetch或axios,它们是 JS 发起的请求,与target无关
真正难处理的是混合场景:比如 SPA 里点击链接本应走前端路由,但加了 target="_blank" 就强制走 HTTP 跳转——这时候得检查框架是否拦截了带 target 的链接,否则行为会不一致。











