[vue] 嵌套iframe,$router.go(-1)后退bug

问题 :更改iframe中src值后导致的路由跳转混乱,多次更改iframe的src属性后,调用router.go(-1),不能实现路由后退上一级
原因:还是在于通过ifream.src赋值,因为域相同,还是会向window.history中插入一条历史记录

之前的代码

js 复制代码
<iframe ref="iframe" :src="url" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
<script>
  export default {
    methods:{
      setIframeSrc(){
        this.url = '新url'
      }
    }
  }  
</script>

解决办法

去掉:src="url" ,增加this.$refs.iframe.contentWindow.location.replace

js 复制代码
<iframe ref="iframe" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
<script>
  export default {
    methods:{
      setIframeSrc(){
      	this.url = '新url'
        this.$refs.iframe.contentWindow.location.replace(this.url)
      }
    }
  }  
</script>

参考:

嵌套iframe,$router.go(-1)后退bug

相关推荐
仿生狮子4 小时前
✂️ Nuxt 最简单的字体裁剪工具:Fontize
javascript·vue.js·nuxt.js
别惊醒渔人9 小时前
Vue3 Diff 优化:最长递增子序列 LIS
前端·javascript·vue.js
FellAveal10 小时前
【Go语言入门学习笔记】Part18.工作池与WaitGroup(也即协程池)
笔记·学习·golang
用户831348593069813 小时前
Vue+Three.js实现PCB电路板3D交互:元器件点击高亮、部件显隐、模型自动旋转
vue.js·webgl·three.js
Wang's Blog14 小时前
Go-Zero项目开发40: 基于Jaeger的分布式链路跟踪实战
开发语言·分布式·golang
TDengine (老段)14 小时前
TDengine Go 与 Rust 连接器 — 高性能异步访问
大数据·数据库·物联网·golang·rust·时序数据库·tdengine
GitLqr15 小时前
提升 Web 开发效率:我常用的 10 个 TypeScript 实战技巧
vue.js·react.js·typescript
Wang's Blog17 小时前
Go-Zero项目开发38:深入限流器实现与应用
开发语言·golang·go-zero
xcLeigh17 小时前
Go入门:main包与main函数的特殊地位
开发语言·后端·golang
AI_paid_community19 小时前
机械研发人员如何使用 Claude?
java·vue.js