监听iframe的url变化,并且实现小程序关闭webView,跳转回小程序。

业务场景是从A页面到B页面,B页面到C页面,C页面中使用iframe标签,然后在嵌套的第三方页面中完成操作后第三方使用window.location.href返回B页面。

我这里的A页面其实是小程序,小程序通过webView标签访问B页面。

遇到的坑:当C页面返回到B页面时,要求点击触发回退时,返回到A页面。但实际效果是触发回退事件后,返回的是C页面中iframe嵌套的页面,而不是A页面。
一直的思路是当C页面回到B页面后,清空路由栈,或者重定向页面,因为当没有路由记录后,回退就不会到在到iframe中展示的页面。
因为一直不成功
beforeRouteEnter前置守卫,
window.addEventListener('popstate',function(e){})监听回退事件, window.addEventListener('hashchange', function (event){})监听路由变化,
window.history.pushState()修改历史记录,
都尝试过了,全部无效。

小程序实现办法(关闭webview,返回到小程序)

引入微信的js-sdk
npm install weixin-js-sdk -save
触发方法

sdk参考微信文档:微信开放文档

 beforeRouteEnter(to, from, next) {
   
      next((vm) => {
   
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值