iframe的name和target必须严格一致才能触发局部加载，浏览器精确比对大小写、空格和引号；刷新后需用localStorage保存并恢复src；跨域时须用postMessage通信。
iframe 的 name 和 target 必须严格一致才能触发局部加载
点击链接不刷新 iframe，八成是 name 和 target 字符串不匹配。浏览器只做精确比对：大小写、空格、引号全算数。
- 统一用小写定义
name，比如<iframe name="main"> - 所有链接必须显式写
target="main"，不能省略或依赖默认值 - 别用
id="main"代替name——target只认name，不认id - JavaScript 动态生成链接时，确保拼出的
target字符串和 iframe 的name完全一致
刷新页面后 iframe 退回到初始 src 怎么办
父页重载时 iframe 默认回退到初始 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传参
子页如何主动刷新父页其他区域（如菜单栏）
子页无法直接操作父页 DOM，必须通过 parent 引用通信。
- 子页 JS 中获取父页 iframe 元素：
const iframe = parent.document.getElementById('main') - 刷新它：
iframe.src = iframe.src（触发重载），或加时间戳防缓存：iframe.src += (iframe.src.includes('?') ? '&' : '?') + 't=' + Date.now() - 若父页用 Vue/React，不要直接改 DOM；应在父页暴露方法到
window（如window.refreshMenu = () => { ... }），子页调用parent.refreshMenu()
为什么不能把 iframe 当“组件路由”来用
看似能切换视图，实则埋下多个硬伤：SEO 不可见、前进后退失效、每个 iframe 独立 history/fetch 凭证、内存开销大。
立即学习“前端免费学习笔记（深入）”；
- 搜索引擎基本不索引 iframe 内容
- 移动端滑动返回手势无法作用于 iframe 内页面
- 每次 src 变化都会重建上下文，定时器、事件监听器、全局变量全丢
- 同源时可读写
contentWindow，但启用sandbox后 origin 被强制设为null，所有跨 frame 访问被切断
postMessage 同步 URL 和业务状态。否则，所谓“局部路由”，只是不断重启一个孤立的小世界。 
