# Cocos JS 使用 Webview 通过 postMessage 进行通信

Cocos JS 使用 Webview 通过 postMessage 进行通信

我是用的是 cocos2.4.12

cocos 向 webview 发送消息

有的人说这个方式是可以的,但是我不行:

typescript 复制代码
window.top.postMessage(data, origin);

其中data就是需要传递的数据,origin是协议+主机+端口号,当为"*"时表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"

通过上面的方式我失败了,我是用下面的方式:

typescript 复制代码
let iframe = this.node.getChildByName("voideCom").getComponent(cc.WebView)["_impl"]["_iframe"];
iframe.contentWindow.postMessage({name:"叫我+V"}, "*");

webview 接收数据

webview 接收数据就很简单了:

typescript 复制代码
window.addEventListener("message", function(event){
  console.log("收到的数据----> ", event.data);
}, false)

webview 发送数据

typescript 复制代码
window.parent.postMessage({
  name: "叫我+V"
}, '*');

cocos 接收

typescript 复制代码
// 取消监听
window.removeEventListener('message', this.handleMessage, false);
// 开启监听
window.addEventListener('message', this.handleMessage, false);

// 回调
handleMessage(e) {
   console.log("收到的数据----> ", event.data);
}

其实就这么简单。

相关推荐
百锦再6 分钟前
从 .NET 到 Java 的转型指南:详细学习路线与实践建议
android·java·前端·数据库·学习·.net·数据库架构
i小杨18 分钟前
前端埋点(打点)方案
前端·状态模式
前端加油站30 分钟前
时间转换那些事
前端·javascript
风清云淡_A1 小时前
【VUECLI】node.js打造自己的前端cli脚手架工具
前端·node.js
YuspTLstar1 小时前
一文掌握Redux-toolkit核心原理
前端·react.js
云枫晖1 小时前
手写Promise-静态方法all和allSettled
前端·javascript
weixin_456904271 小时前
前端开发时npm install报错解决方案
前端·npm·node.js
东华帝君1 小时前
Object.create继承
前端
王嘉俊9251 小时前
Flask 入门:轻量级 Python Web 框架的快速上手
开发语言·前端·后端·python·flask·入门
风继续吹..1 小时前
Express.js 入门指南:从零开始构建 Web 应用
前端·javascript·express