监听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) => {
   
   
      	//查
除了使用 `weixin-js-sdk`,在 Taro 微信小程序 webview 嵌套 Vue 3 + Vite 项目之间实现通信还有其他的方法,以下是一些常用的方法: 1. `window.postMessage()` 方法:可以通过 `window.postMessage()` 方法将消息发送到 Taro 微信小程序 webview 所在的 iframe 窗口。在 Taro 微信小程序中,可以通过监听 `message` 事件来接收从 Vue 3 + Vite 项目发送的消息。 2. WebSocket:可以使用 WebSocket 在 Taro 微信小程序 webviewVue 3 + Vite 项目之间建立一个双向通信的连接。在 Taro 微信小程序中,可以使用 `wx.connectSocket()` 方法来建立 WebSocket 连接,并通过监听 `wx.onSocketMessage()` 方法来接收从 Vue 3 + Vite 项目发送的消息。 3. Storage API:可以使用 Storage API 在 Taro 微信小程序 webviewVue 3 + Vite 项目之间共享数据。在 Taro 微信小程序 webviewVue 3 + Vite 项目中都可以使用 `localStorage` 或 `sessionStorage` 对象来存储和读取数据。 4. 通过 URL 参数传递数据:可以通过在 URL 中添加参数的方式传递数据。在 Taro 微信小程序 webviewVue 3 + Vite 项目中都可以通过 `window.location.href` 或 `wx.navigateTo()` 方法来跳转页面,并在 URL 中添加参数。 以上是一些常用的在 Taro 微信小程序 webview 嵌套 Vue 3 + Vite 项目之间实现通信的方法,根据实际需求可以选择不同的方法来实现。需要注意的是,在使用这些方法时要确保数据的安全性和正确性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值