iframe跳转失效主因是name与target字符串不匹配；刷新后回首页需用localstorage存取src；跨域通信须用postmessage；关闭tab要设src为about:blank再移除dom。
iframe 的 name 和 target 必须完全一致才能触发跳转
点击左侧菜单没反应？右边内容不刷新？90% 是 name 和 target 字符串不匹配。浏览器只做严格字符串比对，大小写、空格、引号全算数。
实操建议：
- 统一用小写定义
name，比如<iframe name="main"></iframe> - 所有导航链接必须显式写
target="main"，不能省略或依赖默认值 - 别用
id混淆——target只认name，不认id - 若用 JavaScript 动态生成链接，检查拼接出的
target值是否和 iframe 的name完全相同（可用console.log打印验证）
刷新父页后 iframe 退回到首页？得靠 localStorage 记住当前地址
F5 或 Ctrl+R 会重载整个页面，iframe 自动恢复初始 src。这不是 bug，是浏览器行为。要保留上次打开的子页，必须手动存取。
实操建议：
- 在 iframe 子页中加监听：
window.addEventListener("beforeunload", () => localStorage.setItem('iframe_src', window.location.href)) - 在父页 DOM 加载完成后读取并设置：
if (localStorage.getItem('iframe_src')) iframeEl.src = localStorage.getItem('iframe_src') - 注意跨域限制：子页跨域时
window.location.href会被浏览器屏蔽为"about:blank"，此时需服务端配合或改用postMessage传参
子页想控制父页的 iframe 或其他 DOM？必须通过 parent 引用
子页 JS 默认只能操作自身上下文，无法直接访问父页元素。想刷新自己所在的 iframe、通知菜单更新、或触发动态 tab 关闭，都得走 parent。
实操建议：
- 获取父页 iframe 元素：
const iframe = parent.document.getElementById('main') - 刷新它：
iframe.src = iframe.src（最简重载），或加时间戳防缓存：iframe.src += (iframe.src.includes('?') ? '&' : '?') + 't=' + Date.now() - 若父页用 Vue/React，不要直接操作 DOM，应通过
postMessage发送指令，由父页监听后调用对应方法
用 iframe 做标签页时，关闭 tab 必须销毁 iframe 实例
只是隐藏或移除 DOM 节点不够，iframe 内部脚本、定时器、事件监听器仍可能存活，造成内存泄漏和状态错乱。
实操建议：
- 关闭 tab 时，先清空 iframe 的
src：iframe.src = 'about:blank' - 再从 DOM 移除：
iframe.remove()（或parent.removeChild(iframe)） - 若用 jQuery，避免只用
.hide()或.removeData()，它们不释放 iframe 上下文 - 多个 tab 共享同一 iframe 实例？不行。每个 tab 应对应独立 iframe 元素，否则 src 切换会互相覆盖
postMessage 不仅要发，还得配对监听；localStorage 不仅要存，还得判断来源是否可信；而每次动态创建 iframe，都要确认其 src 是否带协议（//example.com 会继承父页协议，但 example.com 会变成 http://example.com，HTTPS 站点下直接被拦截）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
