vue中用iframe嵌套页面,点击返回实现真正的退回上一步功能

32 篇文章 0 订阅

vue项目中需要嵌套第三方的页面,但是第三方页面中的网页没有返回按钮,如图所示:此为页面b,页面a为跳到b页面的前一个页面。

点击iframe嵌套页面跳转的第二个页面

要实现不管进入多少层iframe页面,点击回退都直接跳到页面a.
实现:
为了不影响路由判断,使用回退的方法。
首先在进入页面b时,记录一下history.length,并把这个值赋给页面的一个变量:

  data () {
    return {
      para:{},
      htmlStr:'',
      htmlSrc:'',
      rlen:history.length,
    }
  },
  mounted () {
  },
  methods: {
    //返回
    goBack () {
        let len = this.rlen - history.length - 1;//-1是不进入iframe页面的下级页面直接退出的话,执行后退一步的操作
        this.$router.go(len);
    },
  }
1

在点击返回按钮时,重新获取一下history.length,并用刚进入b页面记录的值去减去最新的history.length,即可获取到需要回退的步数。

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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值