uniapp webview子页面向父页面发送数据和触发事件,重点在第3条!!!

1、众所周知H5中iframe可以用过postmessage进行,从H5子页面向H5父页面进行通信。方法如下:

bash 复制代码
// 子页面
window.parent.postMessage({ data: '你的消息' }, '*');


// 父页面
<iframe src="xxxxxxxxxxx"></iframe>
window.addEventListener('message', function(event) {
    console.log('收到父页面的消息:', event.data);
});

以上方法也适用在uniapp webview 子页面向父页面进行通信。

页面卸载是记得将事件removeEventListener

2、 在uniapp微信小程序webview中,H5子页面向微信小程序父页面进行通信。方法如下:

bash 复制代码
// 首先需要引入jssdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>


// 子页面
window.parent.postMessage({ data: '你的消息' }, '*');
// 但在以上特定时机才会触发组件的message事件:小程序后退、组件销毁、分享、复制链接
// 这时候可以通过上面jssdk注册的方法进行触发
// 注意:如果父页面是H5页面,并且注册了window.addEventListener('message')方法。
// 那么执行以下方法,该addEventListener方法还会再触发一次。
// 其他返回方法不会触发addEventListener!!!!!!!!
wx.miniProgram.navigateBack();


// 父页面
<web-view src="xxxxxxxxxxx" @message="onMessage"></web-view>
onMessage(e) {
	console.log('收到父页面的消息:', e);
}

3、在第2种情况下,有个特殊情况很坑!!!!!,因为注册的wx方法会冲突。

在uniapp微信小程序webview中,uniapp H5子页面向微信小程序父页面进行通信。

如果还是用第2种方法。wx.miniProgram将会是undefined,因为uniapp定义的wx 将覆盖jssdk注册的wx 方法。

这时通过再引入一个uni-webview.js 文件得以解决,

下载链接:https://download.csdn.net/download/guoqu1919/88864022?utm_source=bbsseo

整体代码如下:

bash 复制代码
// 首先需要引入jssdk和js文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="uni-webview.js"></script>


// 子页面(其实与第2种逻辑相同,只不过换了方法)
uniWebView.webView.postMessage({data: {}})
uniWebView.webView.navigateBack();


// 父页面
<web-view src="xxxxxxxxxxx" @message="onMessage"></web-view>
onMessage(e) {
	console.log('收到父页面的消息:', e);
}

这个方法使用于H5子页面微信小程序webview父页面 通信,也就是适用于第2种第3种情况。

相关推荐
2501_916007473 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe06014 小时前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张4 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_915909068 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106328 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918418 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214316 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_9159090620 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_9151063220 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159090620 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview