form的target指向iframe能实现“不跳转”，是因为浏览器将响应内容加载进iframe而非当前页面，从而避免整体刷新；需确保iframe的name与target值一致、服务端返回合法html（如含json的完整html结构）并设置content-type为text/html，同域下通过load事件读取body.textcontent，跨域则推荐postmessage通信。
form 的 target 指向 iframe 为什么能“不跳转”
因为浏览器默认会把 form 提交后的响应内容加载进 target 指定的浏览上下文——如果这个上下文是一个 <iframe></iframe>，那整个页面就不会刷新或跳转，看起来就像“无刷新”提交了。
本质是利用了表单原生提交机制 + 浏览器对 target 的历史支持，不需要 JS 拦截，兼容性极好（IE6 都行），但响应内容必须能被 iframe 正常渲染（比如返回 HTML 片段或简单 JSON 字符串）。
-
target值必须和iframe的name属性完全一致（不是id！） - iframe 必须在 form 同一文档内，且已存在（不能 JS 动态插入后再提交，部分老浏览器会失败）
- 服务端返回的内容若为纯 JSON，iframe 会显示为下载或空白页——需包装成 HTML 或用
<pre class="brush:php;toolbar:false;"></pre>输出
服务端返回内容该怎么写才不会让 iframe 显示异常
iframe 加载的是完整文档流，所以服务端响应必须是合法 HTML（哪怕只有一行），否则可能触发下载、乱码或控制台警告 Resource interpreted as Document but transferred with MIME type application/json。
推荐两种稳妥写法：
- 返回
text/html，内容为包裹 JSON 的 HTML：<pre class="brush:php;toolbar:false;">{"code":0,"msg":"ok"} - 返回
text/html，直接执行 JS 回调（需前端预置函数）：<script>parent.handleUploadResponse && parent.handleUploadResponse({code:0,msg:"success"});</script>
注意：不要返回 application/json MIME 类型；Node.js/PHP/Python 等后端务必显式设置 Content-Type: text/html。
如何从 iframe 里安全读取服务端响应数据
不能直接用 iframe.contentDocument 读取——跨域时抛错，同域时也得等加载完成，且 IE 对 DOM 访问限制更严。
- 优先用
postMessage：服务端返回 HTML 中嵌入<script>parent.postMessage(...)</script>，主页面监听message事件 - 同域下可监听 iframe 的
load事件，再取iframe.contentWindow.document.body.textContent，但要过滤掉 HTML 标签 - 避免用
eval()或JSON.parse()直接解析 iframe body 文本——容易因换行、注释、BOM 等失败
示例（主页面监听）：
window.addEventListener('message', e => {<br> if (e.source === iframe.contentWindow) {<br> const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;<br> console.log(data);<br> }<br>});
Chrome 80+ 和 Safari 对 iframe 提交的限制有哪些
主要影响点是第三方 Cookie 和存储访问策略。当 form 提交到跨域 iframe（比如上传到 CDN 或独立文件服务），Chrome 80+ 默认启用 SameSite=Lax，导致 session cookie 不随请求发出，登录态丢失。
- 若目标域名与主站同源，基本无影响
- 若跨域，服务端需明确设置
Set-Cookie: ... SameSite=None; Secure，且请求协议必须为 HTTPS - Safari 更激进，即使同站子域（a.example.com → b.example.com）也可能拦截 cookie，建议统一主域或改用 CORS + FormData
这不是 bug，而是现代浏览器主动收紧的隐私保护行为。单纯靠 target + iframe 已无法可靠维持跨域登录态。
真正难处理的是服务端返回格式校验和跨域通信的容错——很多人卡在 iframe 加载完却读不到数据，其实只是 MIME 类型没设对，或者忘了加 name 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
