uni-app如何实现在H5环境中与web-view中的网页交互通讯

前言

uni-app中的web-view是一个 web 浏览器组件，可以用来承载网页的容器，uni-app开发的app与web-view实现交互的方式相关简单，应用通过属性@message绑定触发事件，然后在web-view的网页向应用 postMessage 触发并收到消息即可，详细请参考官网：web-view | uni-app官网 主要实现代码参考下图所示。

应用端代码:

网页端代码:

但是，以上方法只适合于APP，在H5环境中是不支持的，官方说明如下：

那么，在uni-app如何实现在H5环境中与web-view中的网页交互通讯呢，按照官方的说法，使用window.postMessage方式实现！

---

一、window.postMessage原理

关于window.postMessage的通讯原理，请参考官方档window.postMessage - Web API 接口参考 | MDN

二、window.postMessage实现代码

1.应用端代码

应用端代码如下（主要）：

onLoad: function() {
	window.addEventListener('message', function(e) { // 监听 message 事件
		console.log(e.origin);
		console.log("从" + e.origin + "收到消息： " + e.data);
	});
}

2.网页端代码

网页端代码如下（主要）：

//向uniapp发送信息
function sendMsgToUniapp(value) {
	parent.postMessage(value, "*");
}

说明：uni-app的web-view，在H5环境中其实就是通过iframe来实现的，因此在iframe中的页面可直接通过jquery中的parent来获取父页面对象，并通过parent.postMessage的方式传递消息。