form 的 target 属性必须写在 <form> 标签上，而非按钮或 JS 中；它仅对 <form> 生效，与 action、method 并列，且在 Vue/React 等框架中易因 preventDefault 或路由劫持失效。
form 的 target 属性必须写在 <form> 上，不是按钮也不是 JS
很多人把 target="_blank" 或 target="myframe" 写在 <button type="submit"> 或 <input type="submit"> 上，结果表单依然刷新当前页——浏览器直接忽略这些属性。它只认 <form> 标签自身的 target，和 action、method 并列。
Vue/React 里更易踩坑：@submit.prevent 或 event.preventDefault() 一加，原生提交就没了，target 自然失效；SPA 路由（如 Vue Router）还会劫持整个 form 行为，让 target 彻底不参与流程。
实操建议：
- 检查 DOM 中的
<form>标签是否真有target属性，而不是靠 JS 动态赋值（formElement.target = "xxx"可行，但得确保操作的是<form>元素本身） - 避免用
document.querySelector("button").form.target这类间接链式调用，容易因 DOM 加载顺序或框架重渲染导致取不到 - 若用
formtarget（写在按钮上），它会覆盖<form>的target，调试时要同时检查两者
target="framename" 找不到对应 <iframe name="..."> 就开新窗口
这是规范行为，不是 bug：当 target 值匹配不到任何已存在的 <iframe name="xxx">、<frame> 或命名窗口时，浏览器会新建一个同名窗口（tab）。你看到“跳转失败”，实际是它默默开了个新 tab 显示响应内容。
常见原因：
-
<iframe>是动态插入的，但form.submit()发生在 DOM 插入完成前 -
name拼写不一致：大小写、空格、不可见字符（比如复制粘贴带零宽空格） - 用了
id="xxx"却配target="xxx"——target只认name，不认id
验证方法很简单：
document.querySelector('iframe[name="myframe"]')
提交前跑这句，返回 null 就说明 iframe 没挂载或 name 不对。
用 target + <iframe> 实现无刷新提交，后端返回内容有硬约束
这不是“只要隐藏 iframe 就能无感提交”的魔法。它依赖服务端返回的内容类型和结构：
- 必须返回
text/html（哪怕只有<body>{"ok":1}</body>），不能是裸 JSON、纯文本或空响应；否则 iframe 加载失败，load事件可能不触发，或控制台报 MIME 类型错误 - 跨域时，JS 无法读取 iframe 的
contentDocument，但load仍会触发——你只能靠服务端注入 JS 回调（比如返回<script>parent.handleSuccess(...)</script>），且父页需提前定义好handleSuccess - 同域下可安全读取 iframe 内容：
iframe.contentDocument.body.textContent或解析其document，但要注意 iframe 加载完成后再读（监听load事件）
示例最小可行结构：
<iframe name="upload-frame" style="display:none"></iframe><br><form action="/upload" method="POST" target="upload-frame"><br> <input type="file" name="file"><br> <button type="submit">上传</button><br></form>
微服务页面间通信时，target 不该承担路由或状态同步职责
target 只决定响应 HTML 在哪个上下文渲染，它不改变地址栏、不触发 history push、不通知其他组件更新状态。把它当“通信通道”用，本质是把业务逻辑耦合进 HTML 层级，极易失控。
典型陷阱：
- 子页面通过
target="parent-frame"提交后，期望父页自动刷新侧边栏——但父页根本收不到任何事件，除非子页自己parent.postMessage或注入回调脚本 - 多个微服务页面共用同一个 iframe name，导致响应被错误地塞进非预期的容器
- 误以为
target="_top"能“跳转到主应用路由”，其实只是把后端返回的 HTML 塞进顶层窗口，完全绕过前端路由系统
真正可靠的通信方式是分层的：
- 同域：用
postMessage+window.parent/window.frames定向通信，明确收发方 - 跨域：强制走
postMessage，配合 origin 校验，不依赖 iframe 渲染结果 - 状态同步：由主应用统一管理，子页面只负责触发事件（如
CustomEvent），不直接操作父页 DOM
复杂点从来不在怎么写 target，而在于谁该负责响应解析、错误处理、重试逻辑和用户反馈——这些都该收口在 JS 层，而不是交给浏览器隐式行为兜底。
