uni-app如何实现在H5环境中与web-view中的网页交互通讯
前言
uni-app中的web-view是一个 web 浏览器组件，可以用来承载网页的容器，uni-app开发的app与web-view实现交互的方式相关简单，应用通过属性@message绑定触发事件，然后在web-view的网页向应用 postMessage 触发并收到消息即可，详细请参考官网：主要实现代码参考下图所示。
应用端代码:
网页端代码:
但是，以上方法只适合于APP，在H5环境中是不支持的，官方说明如下：
那么，在uni-app如何实现在H5环境中与web-view中的网页交互通讯呢，按照官方的说法，使用window.postMessage方式实现！
一、window.postMessage原理
关于window.postMessage的通讯原理，请参考官方档
二、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的方式传递消息。
下一篇：
Java创建对象的4种方式