form 的 target 属性必须匹配 iframe 的 name 而非 id；target 值为 _self/_blank/_parent/_top 时按预定义规则处理，自定义名称则需存在同名 name 的 iframe，否则降级为 _self；现代推荐 fetch 替代 target + iframe。
form 的 target 属性必须匹配 iframe 的 name 而非 id
表单提交到指定框架，核心是让 <form></form> 的 target 属性值与目标 <iframe></iframe> 的 name 属性完全一致——id 无效，哪怕两者值相同也不起作用。
- 错误写法：
<iframe id="resultFrame"></iframe>+<form target="resultFrame"></form>→ 提交仍走当前页或新窗口 - 正确写法：
<iframe name="resultFrame"></iframe>+<form target="resultFrame"></form>→ 内容加载进该 iframe - 注意大小写敏感：若
name="ResultFrame"，则target="resultframe"不匹配
target 值为 _self / _blank / _parent 等关键字时的行为差异
当 target 设为保留关键字，浏览器按预定义规则处理，不依赖页面中是否存在同名 frame 或 iframe：
-
target="_self"：在当前标签页/框架内加载（等价于未设 target） -
target="_blank"：新开标签页（可能被浏览器拦截，尤其无用户手势触发时） -
target="_parent"：提交结果加载到父级浏览上下文（适用于嵌套 iframe 场景） -
target="_top"：加载到最顶层窗口，会打破所有 iframe 嵌套
这些值无需对应任何 DOM 元素，但一旦设为自定义名称（如 "resultFrame"），就必须存在对应 name 的 <iframe></iframe>，否则退化为 _self 行为。
提交后 iframe 内容刷新但页面状态丢失的常见原因
使用 target 提交到 iframe 后，常出现表单字段清空、按钮禁用失效、JS 状态未更新等问题，本质是页面未感知 iframe 加载完成事件：
- iframe 加载完成无法直接监听
load事件（跨域时被阻止；同域下需确保事件绑定时机早于提交） - 不要依赖
form.onsubmit = () => { ... }后立即操作 iframe 内容——此时响应尚未返回 - 同域安全前提下，可用
iframe.addEventListener('load', handler)捕获加载完成，再读取iframe.contentDocument或重置表单 - 若后端返回非 HTML（如 JSON），iframe 会显示原始文本或下载提示，此时应改用
fetch+ 手动处理，而非依赖target
现代替代方案：fetch + 阻止默认提交更可控
用 target + iframe 实现“无刷新提交”看似简单，但调试困难、SEO 友好性差、错误处理弱。实际项目中更推荐显式控制流程：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const res = await fetch(form.action, {
method: form.method || 'POST',
body: formData
});
const html = await res.text();
resultFrame.srcdoc = html; // 或插入到某容器内
});
这种方式能精确捕获网络错误、HTTP 状态码、解析响应，并保持主页面 JS 状态完整。只有在必须兼容极老浏览器（如 IE9）且后端只支持 form post 时，才退回 target 方案。
真正要注意的是：跨域 iframe 无法读取内容，也收不到 load 事件回调；而 target 提交本身不校验目标是否存在，失败时静默降级，容易掩盖问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
