iframe 的 history.back() 仅作用于自身，不影响父页面；其历史栈与父页面完全隔离，跨域时无法通过 contentwindow 访问，需由父页面统一接管导航并用 pushstate/popstate 同步状态。
iframe 的 history.back() 只作用于 iframe 自身，不影响父页面
直接在 iframe 里调用 window.history.back()，只会让 iframe 内部页面后退，父页面 URL 和状态完全不动。这是最常被误解的一点——很多人以为点了浏览器后退按钮，iframe 会自动跟着回退，其实不会。
常见错误现象包括：用户在 iframe 里点了 3 次链接，然后点浏览器「返回」，结果 iframe 还停留在第 3 页，父页面却回到了上一个路由（比如从 /page-b 回到 /page-a），导致 iframe 显示空白或跨域错误。
原因很简单：iframe 是独立的 browsing context，它有自己的 history 栈、location、document，和父页面完全隔离。父页面的 popstate 事件根本收不到 iframe 内部的状态变化。
- 同域 iframe 可以用
document.getElementById('myIframe').contentWindow.history.back()主动触发其内部后退 - 跨域 iframe 调用
contentWindow.history会抛SecurityError，不可行 -
history.back()在 iframe 中静默失败（不报错）的情况：该 iframe 尚未发生过任何导航，或历史栈长度 ≤ 1
用 pushState + popstate 同步父页面与 iframe 的导航状态
真正可控的做法是：所有 iframe 页面跳转，都由父页面统一接管，并用 history.pushState() 记录状态；再通过监听 popstate 重置 iframe 的 src。
关键约束：这个方案只适用于同域 iframe（能读写其 contentWindow），且必须确保每次跳转都走同一套逻辑，不能混用 iframe 内部的 a 标签跳转或 location.href。
- 跳转时调用
history.pushState({ src: 'page2.html' }, '', '?src=page2.html')，把目标 URL 存进 state - 监听
popstate时，从event.state.src取值，赋给iframe.src - 注意：首次加载页面时
popstate不触发，需手动解析 URL 参数（如new URL(window.location).searchParams.get('src')）来初始化 iframe - 避免用
replaceState，否则后退会跳过当前记录，导致 iframe 状态丢失
Vue/React 项目中避免 iframe 自主导航，改用 postMessage 协作
现代前端框架里，直接操作 iframe.src 容易和路由系统冲突（比如 Vue Router 的 router.go() 和浏览器原生 history 不同步）。更稳妥的方式是禁止 iframe 内部跳转，全部交由父组件控制。
实现要点：iframe 页面（同域）内监听点击，用 window.parent.postMessage() 发送目标 URL；父组件监听 message 事件，更新 iframe.src 并调用 history.pushState()。
- iframe 内 JS 示例：
window.addEventListener('click', e => { if (e.target.tagName === 'A') { e.preventDefault(); window.parent.postMessage({ type: 'NAVIGATE', url: e.target.href }, '*'); } }); - 父组件监听：
window.addEventListener('message', e => { if (e.data.type === 'NAVIGATE') { iframe.src = e.data.url; history.pushState({ url: e.data.url }, '', `?iframe=${encodeURIComponent(e.data.url)}`); } }); - 跨域 iframe 无法使用此法（
postMessage可用，但无法读取其 DOM 或拦截点击） - 务必校验
e.origin，防止恶意消息注入
history.length 计算回退步数是个危险的临时方案
有些项目用进入页面时记下 history.length，退出时用差值算要 go() 几步。这方法表面能用，但极易失效。
问题在于：history.length 是整个浏览器标签页的历史总长度，不是当前页面专属的。其他 tab、iframe、甚至 background script 都可能修改它；SPA 路由切换（如 Vue Router 的 push）也会增加条目，导致计算偏移。
- 例如：用户在 iframe 页面期间，又开了新 tab 并访问了 2 个页面，
history.length就多了 2，回退步数就错了 -
history.go(n)超出范围时静默失败，无提示，调试困难 - 该方案无法处理前进（forward）场景，也不支持 URL 参数还原
- 仅建议作为原型验证或极简场景的临时补丁，不要用于生产环境
真正可靠的 iframe 历史控制，核心就一条：放弃让 iframe 自己管理历史，把它当成纯视图容器，所有导航决策和状态落地都由父页面完成。跨域场景下，只能接受 iframe 历史与父页面脱钩——这是浏览器安全模型决定的，绕不过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
