iframe是html中唯一不依赖js即可实现“局部加载”的原生元素，但本质是嵌套独立文档而非dom局部更新；需确保name与target严格一致、用localstorage保持刷新后状态、跨域时改用postmessage，并通过parent引用实现父子通信。
iframe 是 HTML 中唯一能不依赖 JS 就实现“局部加载”的原生元素，但它不是真正的 DOM 局部更新——而是加载一个独立文档。想让它可靠工作，关键在 name/target 匹配、状态保持和跨域处理。
iframe 的 name 和 target 必须严格一致
点击菜单没反应、右边内容不刷新，90% 是 name 和 target 字符串不相等。浏览器比对时区分大小写、空格、引号，甚至末尾多一个空格都会失败。
- 统一用小写定义：
<iframe name="main"></iframe> - 所有链接必须显式写：
<a href="/user.html" target="main"></a>，不能省略target依赖默认行为 - 不要用
id混淆：target只认name，跟id无关 - JS 动态生成链接时，确保拼出的
target值和 iframe 的name完全相同（可用console.log核对）
刷新后 iframe 回退到初始页？得存 src 到 localStorage
F5 重载父页时，iframe 会丢掉当前 URL，回到 src 初始值。这不是 bug，是浏览器默认行为。要恢复上次打开的页面，必须手动记、手动设。
- 在 iframe 子页中加监听：
window.addEventListener("beforeunload", () => localStorage.setItem('iframe_src', window.location.href)) - 在父页
DOMContentLoaded后读取并赋值：if (localStorage.getItem('iframe_src')) iframeEl.src = localStorage.getItem('iframe_src') - 注意：子页跨域时
window.location.href会被浏览器限制为"about:blank"，此时需服务端返回真实路径，或改用postMessage传参
子页如何主动刷新父页的 iframe 或其他区域
子页提交成功后，常需让父页菜单栏更新状态，或让另一个 iframe 重新加载数据。不能直接操作父 DOM，必须通过 parent 引用。
- 子页中获取父页 iframe 元素：
const iframe = parent.document.getElementById('main') - 刷新它：
iframe.src = iframe.src（触发重载），或加时间戳防缓存：iframe.src += (iframe.src.includes('?') ? '&' : '?') + 't=' + Date.now() - 若父页用了 Vue/React，不要直接操作 DOM，应通过暴露的全局方法或事件总线通知框架更新
为什么不能只靠 或普通链接
这些标签触发的是整页跳转或重载，不控制目标容器、不拦截默认行为、不处理响应内容，和“局部刷新”无关。
-
<meta http-equiv="refresh" content="5;url=/index.html">会让整个页面每 5 秒刷新一次 - 普通
<a href="/xxx"></a>点击后也是全量导航，无法限定只换某一块内容 - 真正局部更新必须配合 JS 控制 DOM（如 fetch + innerHTML），或者接受 iframe 的隔离模型
iframe 的硬伤在于隔离性：它不共享 window、不冒泡事件、SEO 不友好、响应式难控。但如果你需要兼容老旧终端、文件上传保留主页面状态、或快速上线一个菜单驱动的内容切换系统，它仍是当下最轻量、最可控的选择。别指望它像现代 SPA 那样灵活，用对边界才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
