美文网首页
vue-router内嵌iframe页面,回退异常

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

作者: DDLH | 来源:发表于2020-09-18 09:00 被阅读0次

问题描述:在vue页面内嵌了iframe,通过$router.back()回退异常

问题分析:

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

原因分析:

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

解决方案:

  1. 使用==parent.history.back()== ,最终采用的方案!!!
  2. 使用==history.lenght== 获取当前历史记录长度,对比一开始嵌套iframe时的历史记录长度,通过$router.go()实现
// this.rlen 进入iframe嵌套页面之前历史记录长度
let len = this.rlen - history.length - 1;//-1是不进入iframe页面的下级页面直接退出的话,执行后退一步的操作
this.$router.go(len);

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

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

  1. 利用window.history.popState
    通过监听popState或pushState事件,做相应的处理,记得销毁
  2. 如果是因为需要更换iframe地址引发的问题

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

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

<iframe ref="iframe"></iframe>

this.$refs.iframe.contentWindow.location.replace(src)

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

相关文章

网友评论

      本文标题:vue-router内嵌iframe页面,回退异常

      本文链接:https://www.haomeiwen.com/subject/aiwdyhtx.html