当前位置：首页 > news >正文

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

news 2025/6/28 16:42:12

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

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

以上方法也适用在uniapp webview 子页面向父页面进行通信。
页面卸载是记得将事件removeEventListener。

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

// 首先需要引入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
整体代码如下：

// 首先需要引入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);
}