vue-router内嵌iframe页面，回退异常

Posted 2023-03-10

参考技术A 使用vue-router跳转的项目页面中内嵌了一个iframe，如果iframe页面内进行了跳转，用vue-router的返回，是无法回到期望的vue页面

执行vue-router的返回，回退的只是iframe导航，如果iframe里面点击了多次，使url发生变更，那么用户要点击很多次才能真正的返回。

解决方案：

window指的是当前帧,而parent指的是当前帧的父节点.
因此,在正常情况下使用窗口.在处理iframe时使用parent
如果您没有任何< iframe>然后去window.history.back()

注：history.length:浏览器历史列表中的元素数量

缺陷：如果你的iframe页面也有回退事件，这种方法可能就不适用（在iframe操作回退，最新的history.length并不会减少）

不要修改 iframe.src，而是删除旧 iframe 元素，新建一个 iframe 元素并替换它，这样不会产生 history。
直接 createElement，替换原来的 iframe。

5.iframe 里面的链接用 location.replace 跳转，这样就只会有一个历史记录了

大家有更好的方案欢迎提出👏