form 的 target 属性能“绕过”页面刷新，是因为它将提交响应定向到指定上下文（如 iframe），不触发当前页 DOM 重载；但需 target 值匹配已存在的 iframe name、服务端返回合法 HTML、且读取数据必须在 iframe onload 后进行。
form 的 target 属性为什么能“绕过”页面刷新
因为 target 是 <form> 原生提交行为的导航控制开关，它不依赖 JavaScript，也不触发浏览器默认的整页跳转逻辑——只要目标存在且可加载，响应内容就只在那个上下文中渲染，当前页面 DOM 完全不动。
常见误解是“用了 target 就等于无刷新”，其实不然：如果 target="_self" 或没匹配到有效目标（比如写了 target="myframe" 却没声明对应 <iframe name="myframe">），表单仍会刷新当前页。
-
target必须写在<form>标签上，写在<button>或<input type="submit">上无效 - 值必须是已存在的
<iframe name="xxx">的name，大小写敏感，不是id - 若目标是新窗口（如
target="_blank"），现代浏览器会拦截非用户主动触发的弹窗，form.submit()调用不算“主动”
隐藏 iframe 为何必须用 display:none 而不能用 visibility:hidden
旧版 IE（尤其是 IE6–8）对 visibility:hidden 的 iframe 会阻止其加载完成，导致 load 事件永不触发，后续读取内容、执行脚本全部失败；而 display:none 只是视觉隐藏，iframe 依然正常发起请求、解析 HTML、触发生命周期事件。
其他安全隐藏方式也有效，但需注意边界：
-
width="0" height="0"可行，但部分移动端浏览器可能因尺寸过小放弃渲染 -
position: absolute; left: -9999px;在某些 CSS 重置场景下可能被意外显式还原 - 绝对禁止设置
src="about:blank"或任何跨域 URL——显式赋值会触发同源策略限制，导致无法读取contentWindow.document
服务端返回内容必须是完整 HTML，否则 iframe 里啥都读不到
浏览器把 target 指向 iframe 后，会把响应当作 HTML 解析。如果后端只返回 {"code":200,"msg":"ok"} 这类纯 JSON，即使 Content-Type: text/html，浏览器也无法生成可用 DOM——document.body 不存在，textContent 就是空字符串，postMessage 也发不出去。
最小合法结构示例（必须含 <html> 和 <meta charset>）：
<html>
<head><meta charset="utf-8"></head>
<body>{"code":200,"msg":"上传成功"}</body>
</html>
- 务必检查响应头：
Content-Type: text/html; charset=utf-8 - 不要用
echo json_encode(...)直出，要包裹成 HTML 片段 - 若需执行 JS（如
alert()或调用parent.callback()），必须放在<body>内，且确保父页面函数已定义
读取 iframe 返回数据的唯一可靠时机是 load 事件
很多人在 form.submit() 后立刻尝试访问 iframe.contentWindow.document，结果得到 null 或 SecurityError——这不是跨域问题，而是时机错了。iframe 加载是异步过程，网络延迟、服务端渲染、gzip 解压都会影响完成时间，setTimeout 靠猜毫秒数必然失效。
正确做法只有一条：监听 iframe.onload，且必须在提交前绑定：
- 动态创建 iframe 时，先设
iframe.onload = handler，再 append 到 DOM，最后提交表单 - 静态 iframe 也要确保
onload绑定早于表单提交，避免事件丢失 -
load触发后，才能安全读取iframe.contentWindow.document.body.textContent或注入postMessage - 不要依赖
DOMContentLoaded或readystatechange，它们在 iframe 场景下不可靠
真正容易被忽略的点是：哪怕 iframe 和父页同源，只要服务端返回内容缺失 <html> 结构或没声明 charset，load 虽然触发了，document.body 依然可能为 null。
