# 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);
}

其实就这么简单。

相关推荐
支支დ4 小时前
Phind 前端特定优势:AI 编程助手的体验革新
前端
DDXYcoder4 小时前
万字解析动态内存从编译到运行
java·前端·算法
光影少年4 小时前
react navite封装一个RN 通用按钮组件
前端·javascript·react native·react.js·前端框架
晴天164 小时前
CSS 预处理器深度解析-Day35
前端·css
恋猫de小郭4 小时前
AI 时代,也许你的 Flutter 需要一套 Dartastic OpenTelemetry 监控
android·前端·flutter
wujiuhsu4 小时前
前端实现二维码生成器:Canvas、SVG、纠错等级、扫码校验与批量
前端
计算机魔术师4 小时前
从卖铲人到圈地:英伟达129亿拿下Hugging Face
前端
攻城狮-申4 小时前
git本地分支对齐远程分支
前端·git
IT_陈寒4 小时前
Vite热更新突然失效?可能是这个配置在捣鬼
前端·人工智能·后端
一只小阿乐4 小时前
java 快速上手开发 2
java·开发语言·前端