iframe 本身不“无刷新”，它只是把刷新限制在自己内部；必须确保 target 和 name 字符串完全一致、同源、服务端返回完整 HTML、防缓存、绕过 Chrome 隐藏 iframe 限制等条件才能正常工作。
iframe 本身不“无刷新”，它只是把刷新限制在自己内部——点击链接或提交表单后，只有 iframe 区域重载，主页面 DOM 不变。这是原生支持的最轻量局部更新方式，但必须满足几个硬性条件，否则会新开标签页、报错或白屏。
target 和 name 必须严格一致
这是 90% 失败案例的根源。浏览器只认字符串完全相等：大小写、空格、引号、下划线全算数。
-
target="main"对应<iframe name="main">✅ -
target="Main"或target=" main"或target="main-frame"❌（新开页） - 别用
id="main"代替name="main"——target压根不看id - 动态生成链接时，确保 JS 拼出的
target字符串和 iframe 的name完全一致，建议统一小写+无特殊字符
同源是读取响应内容的前提
你想在父页拿到子页返回的数据（比如 JSON 或提示文字），就必须同域。跨域时 iframe.contentWindow.document 直接抛 SecurityError，连 onload 都可能不触发。
- 同源下可安全读取：
iframe.contentDocument.body.innerHTML或iframe.contentWindow.document.title - 跨域时唯一可行路径是子页主动调用
parent.postMessage()，父页监听message事件 - 服务端返回内容类型要匹配：返回 HTML 就设
Content-Type: text/html；返回纯文本就设text/plain，否则浏览器可能误解析执行脚本
防缓存与定时刷新要加时间戳
本地文件（file://）或静态资源极易被浏览器缓存，导致 iframe “看似刷新”实则内容没变。
立即学习“前端免费学习笔记（深入）”；
- 手动刷新：不要写
iframe.src = iframe.src，改用new URL(iframe.src).searchParams.set('t', Date.now()) - 自动刷新：用
setInterval()调用上述逻辑，间隔建议 ≥ 2000ms，避免服务端压力 - 只刷目标 iframe：用
document.querySelectorAll('iframe[src^="/api/"]')精准筛选，别用getElementsByTagName("iframe")拉所有
隐藏 iframe 提交表单要绕过 Chrome 92+ 限制
Chrome 92 起对长期 display:none 的 iframe 表单提交做了拦截，控制台报 The form owner is not in a Document。
- 解决方案：iframe 不能一开始就
display:none，而是用position: absolute; left: -9999px;移出视口但保留在 DOM 中 - 提交前确保 iframe 已挂载：
document.body.appendChild(iframe)（如果它是动态创建的） - 服务端返回必须是完整 HTML 文档结构（哪怕只有一行
<script>parent.uploadDone()</script>），不能只返回 JSON 字符串 - 清空表单字段必须等
iframe.onload触发后再操作，不能在form.onsubmit里直接reset()
真正难的不是让 iframe 动起来，而是判断什么时候不该用它——比如需要 SEO、要共享状态、要响应式高度自适应，或者你根本控制不了子页的域名。这些地方硬上 iframe，后期踩坑成本远高于初期写几行 fetch。
