因为老系统或低版本浏览器不支持 formdata 和 fetch 上传文件，而 iframe 配合 form 可兼容实现伪异步上传；需同域、target 与 name 匹配、服务端返回完整 html；清空字段须在 iframe load 后执行；多 form 共用 iframe 会冲突，应动态管理。
为什么用 iframe 而不是直接 fetch 或 FormData？
因为老系统或低版本浏览器（比如 IE9 及以下）不支持 FormData 上传文件，fetch 也无法处理 multipart/form-data 类型的二进制文件流。而原生 form 提交天然支持文件上传，只要配上 enctype="multipart/form-data" 和一个隐藏 iframe，就能绕过刷新限制——这不是“真异步”，但它是兼容性最强的兜底方案。
-
iframe必须和主页面同域，否则iframe.contentWindow.document会触发跨域拒绝 -
form的target值必须严格匹配iframe的name属性（不是id），部分浏览器对id不敏感 - 服务端返回内容必须是完整 HTML（哪怕只有一行
<script></script>），不能只返回 JSON 或纯文本，否则无法被iframe解析执行
如何让 form 提交后清空字段且不跳转？
靠 type="reset" 按钮不行——它会中断提交；靠 onsubmit="return false" 更不行——根本发不出请求。正确做法是在提交瞬间调用 reset()，但必须确保它发生在提交完成之后（即服务端响应到达后）。
- 最稳妥的方式是监听
iframe的load事件，在回调里操作主页面 DOM - 示例中常见错误：在
form.onsubmit里直接写this.reset(); return false;——这会导致表单压根没发出 - 正确顺序是：
form.submit()→ 等待iframe.onload→ 执行form.reset()或手动清空input.value = ''
服务端返回内容怎么传回主页面？
iframe 加载完成后，可通过 iframe.contentWindow.document.body.innerHTML 读取响应体，但要注意：
- 返回内容若含
<script></script>标签，需确保它在body内，且未被浏览器静默拦截（有些安全策略会禁用内联脚本） - 若返回的是 JSON 字符串（如
{"status":1,"msg":"ok"}），必须用JSON.parse()解析，不能直接eval（已过时且危险） - 常见坑：服务端返回 HTTP 状态码为 500，但
iframe仍会触发load事件，需在响应体中显式标记错误状态，不能依赖 HTTP 码
多个 form 共用一个 iframe 会出问题吗？
会。如果两个 form 都设置 target="uploadFrame"，后提交的那个会中断前一个的 load 监听，导致前一个的回调永远不执行。
- 解决方法：每个
form绑定独立iframe，名字动态生成（如uploadFrame_1、uploadFrame_2） - 或统一用一个
iframe，但每次提交前先移除旧的load监听器，再绑定新的 - 更隐蔽的问题：重复创建
iframe节点但未销毁，长期运行会导致内存泄漏，建议用document.createElement('iframe')+remove()动态管理
真正难的不是让页面不刷新，而是让开发者意识到：这个方案里，「响应处理」和「UI 同步」完全由你手动缝合，没有框架帮你兜底。稍一疏忽，就变成“看起来没刷新，其实状态早已错乱”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
