iframe刷新后丢失状态的根本原因是设计使然：src属性在父页面刷新时被重新读取，浏览器将其视为独立文档加载器，dom重建即按原始src重载，不保留内部导航历史。
iframe 刷新后丢失状态的根本原因
不是 bug，是设计使然。iframe 的 src 属性在父页面刷新时被重新读取，它不感知内部导航历史。浏览器把 iframe 当作一个“独立文档加载器”，只要 DOM 重建，就按原始 src 值重载——哪怕你刚在里头点进了第 5 层页面，刷新后也必然回到第 1 层。
同源或跨域不影响这个行为，只影响你能否“观测”到内部跳转：
- 同源时，父页能读
iframe.contentWindow.location.href，但仅限于load事件触发后； - 跨域时，父页完全无法访问内部 URL，必须依赖子页主动发
postMessage； - 无论哪种情况，父页本身都不保存任何状态，
src是静态属性，不会自动更新。
localStorage + 子页自导向方案（推荐用于同源场景）
把状态记忆逻辑下沉到子页面自身，绕过父页控制的脆弱性。核心是让 fileB.html 和 fileC.html 协同工作：
-
fileB.html加载时检查localStorage.getItem('persistedTarget')，若值为'fileC'，立即执行window.location.replace('fileC.html')； -
fileC.html加载时，从 URL 参数（如?source=fileB）识别来源，并写入localStorage.setItem('persistedTarget', 'fileC')； - 用户点击跳转时，链接必须带参数：
@#@#@#@#@#@#@#@#@#@0； - 避免用
window.location.href = ...，优先用replace()防止浏览器历史栈污染。
这个方案不依赖父页 JS，也不要求修改 iframe 标签，纯子页自治，兼容性好、调试路径清晰。
父页监听 + postMessage 同步（必须用于跨域场景）
当 iframe 内容来自不同域名时，唯一可行路径是子页主动上报 URL：
- 子页中加入：
window.parent.postMessage({ type: 'iframeUrlChange', url: window.location.href }, '*')； - 父页监听：
window.addEventListener('message', e => { if (e.data.type === 'iframeUrlChange') localStorage.setItem('iframeLastUrl', e.data.url) })； - 父页初始化时读取：
const savedUrl = localStorage.getItem('iframeLastUrl'); if (savedUrl) iframe.src = savedUrl;； -
postMessage的'*'目标需谨慎，生产环境应校验e.origin； - 注意：子页首次加载也会触发一次
postMessage，需判断是否为真实导航（比如对比document.referrer或加时间戳标记）。
容易被忽略的边界问题
真正卡住人的往往不是主逻辑，而是这些细节：
-
localStorage在无痕模式或禁用 JS 的环境下失效，需降级处理（例如 fallback 到 URL hash）； - 多个 iframe 共用同一 key 会互相覆盖，务必用唯一标识区分，比如
localStorage.setItem('iframe_target_' + iframe.id, 'fileC')； - 子页跳转后未清除旧状态，可能导致下次刷新误跳，应在
fileC.html中写入前先清空相关 key； - 父页使用
v-if或ngIf控制 iframe 显示时，DOM 移除即重置，此时 localStorage 方案仍有效，但对象池式隐藏（display: none）更省资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
