formtarget属性强制覆盖form的target,非法值(如"xyz")会降级回退;合法值仅五个:_blank、_self、_parent、_top及已存在且name完全匹配的iframe名称(大小写敏感、无空格)。

target值写错导致行为不一致
浏览器对非法target值的处理并不统一:比如target="blank"(漏下划线)、target="_BLANK"(大小写错误)、target="myFrame "(末尾空格)——这些在 Chrome 可能 fallback 到_blank,在 Safari 却静默降级为_self,Firefox 有时会新建窗口但名称不匹配。结果就是本地测试正常,上线后用户反馈“点链接没反应”或“总在当前页跳”。
必须严格按标准拼写:_self、_blank、_parent、_top,自定义名只允许字母数字和短横线,且大小写敏感。
-
target="_blank"是唯一合法的小写带下划线形式;"_new"、"blank"、"new"全无效 - 自定义名如
target="sidebar",页面中必须存在<iframe name="sidebar"></iframe>,否则行为不可控 - 避免用数字开头(如
target="1panel"),部分旧版 IE 拒绝解析
rel="noopener noreferrer"不是可选项
现代浏览器(Chrome 49+、Firefox 52+、Safari 10.1+)对缺失rel="noopener noreferrer"的target="_blank"链接会主动降级:要么阻止新开页,要么强制在当前页打开。这不是 bug,而是安全策略——防止 Tabnabbing 攻击。
只加rel="noopener"不够,旧版 Safari(≤10.0)仍允许window.opener访问;只加noreferrer则无法切断opener引用。两者必须共存。
立即学习“前端免费学习笔记(深入)”;
- 完整写法:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a> - 若需兼容极老环境(如 IE11),可额外加
onclick="window.open(this.href,'_blank','noopener');return false;"兜底,但注意 SSR 场景下window未定义 - 框架中(如 React 的
<Link>)不支持target,硬加会被忽略,得用原生<a>并确保href非空
iframe场景下target行为被sandbox拦截
当<iframe sandbox>没显式声明allow-popups时,target="_blank"会被浏览器静默忽略——点击无反应,控制台也不报错。这是 HTML5 沙箱机制的默认限制,不是代码写错了。
同样,如果父页通过<base target="_blank">全局设了默认目标,子 iframe 内的链接即使写了target="_self"也可能被覆盖,除非子页自己再写一个<base target="_self">覆盖。
- 安全起见,含
sandbox的iframe若需开新页,必须加allow-popups(推荐同时加allow-scripts) -
target="_parent"和target="_top"在单页应用(SPA)里容易意外跳出整个应用,调试时注意检查是否嵌套了第三方 iframe - 跨域
iframe中,部分浏览器(如 Safari)会直接禁用target="_blank",fallback 到_self,此时只能靠 JSwindow.open()配合用户手势触发
form的target属性常被误认为控制提交地址
form标签的target只决定响应内容在哪展示,跟请求发给谁毫无关系——那是action的事。很多人写了target="_blank"却看不到新页,其实是后端返回了 JSON 而非 HTML,或者响应头Content-Type不是text/html。
更隐蔽的问题是:Chrome 对无用户手势触发的form.submit()(比如在fetch回调里调用)会拦截target="_blank",强制在当前页加载响应,且不提示。
- 验证方法:把
form的action地址手动粘贴进新标签页访问,看能否渲染出 HTML 页面 - 若后端返回的是 JSON,
target完全失效,新页只会显示原始 JSON 文本或空白 - JS 提交前务必确认
form.action已正确赋值,target不会继承任何隐式路径
target值产生截然不同的实际效果,而且多数时候不报错、不警告,只默默走另一条路。



















