formtarget属性仅对type="submit"或type="image"的表单控件有效，必须位于<form>内或通过form属性关联表单，支持"_self"、"_blank"等值，动态修改需用setAttribute或element.formTarget，且目标iframe的name必须预先存在并完全匹配。
formtarget 属性只对 type="submit" 或 type="image" 有效
很多开发者误以为给普通 <button> 或 <a> 加 formtarget 就能控制跳转窗口，其实不行。这个属性是表单提交专属的，必须配合 type="submit"（或 type="image"）且按钮需在 <form> 内，或者显式绑定 form 属性指向某个表单。否则浏览器直接忽略该属性。
常见错误现象：formtarget="_blank" 不生效、页面仍在当前页跳转、控制台无报错但行为不符合预期。
- 确保按钮有
type="submit"—— 即使它看起来像普通按钮，也得显式声明 - 如果按钮不在
<form>标签内，必须用form="form-id"关联对应表单 -
formtarget值仅支持"_self"、"_blank"、"_parent"、"_top"或自定义 iframe 的name
动态切换 formtarget 需要 JS 修改 DOM 属性，不是修改变量
formtarget 是 HTML 属性，不是 JavaScript 可响应式绑定的属性（比如 Vue 的 v-bind 或 React 的 props）。想“动态”改，就得直接操作元素的 setAttribute 或赋值 element.formTarget（注意大小写：DOM 属性是 formTarget，HTML 属性是 formtarget）。
示例场景：用户勾选“后台打开结果”，就让提交按钮下次点击时走 _blank：
立即学习“前端免费学习笔记（深入）”；
const btn = document.querySelector('button[type="submit"]');
document.getElementById('open-in-blank').addEventListener('change', e => {
if (e.target.checked) {
btn.setAttribute('formtarget', '_blank');
} else {
btn.setAttribute('formtarget', '_self');
}
});
- 不要用
btn.formtarget = '_blank'—— 这不会同步到 HTML 属性，部分浏览器不识别 - 避免重复调用
setAttribute时没清理旧值，建议每次完整重设 - 如果表单用了
target属性，它会和formtarget冲突：后者优先级更高
formtarget="_blank" 在 Safari 和部分 iOS WebView 中可能被拦截
这不是 bug，而是浏览器主动防御策略：非用户手势（如异步回调里触发 submit）发起的 _blank 窗口，大概率被拦截。即使你点了按钮，如果提交逻辑被 Promise.then 或 setTimeout 包裹，Safari 就可能静默失败。
- 确保
form.submit()或原生点击事件发生在用户直接触发的同步上下文中 - 避免在
fetch().then(() => form.submit())这类链路中使用formtarget="_blank" - 兼容方案：改用
window.open(url, '_blank')+ 手动构造请求（但失去原生表单编码/文件上传能力）
与 iframe name 配合时，name 必须提前存在且拼写完全一致
如果你想把结果加载进页面里的某个 <iframe>，不能只写 formtarget="my-frame" 就完事。那个 <iframe name="my-frame"> 必须在提交前已渲染在 DOM 中，且 name 值大小写、空格、连字符都必须一模一样。
容易踩的坑：
- 用
id="my-frame"代替name="my-frame"——formtarget只认name，不认id - iframe 是 JS 动态插入的，但提交发生在插入前 —— 提交时找不到目标，回落到
_self - 多个 iframe 共享同一个
name，结果内容会加载到最后一个同名 iframe 中
