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

其实就这么简单。

相关推荐
一念之间lq1 分钟前
Elpis 第四阶段· Vue3 完成动态组件建设
前端·vue.js
akira09122 分钟前
滚动控制视频播放是如何实现的?GSAP ScrollTrigger + seek 实践 vivo官网案例
前端·产品
用户636836608554 分钟前
前端使用nuxt.js的seo优化
前端
OldBirds5 分钟前
烧脑时刻:Dart 中异步生成器与流
前端·后端
湛海不过深蓝6 分钟前
【echarts】折线图颜色分段设置不同颜色
前端·javascript·echarts
昨晚我输给了一辆AE867 分钟前
关于 react-hook-form 的 isValid 在有些场景下的值总是 false 问题
前端·react.js
xinyu_Jina13 分钟前
Calculator Game:WebAssembly在计算密集型组合优化中的性能优势
前端·ui·性能优化
JustHappy16 分钟前
「2025年终个人总结」🤬🤬回答我!你个菜鸟程序员这一年发生了啥?
前端
啃火龙果的兔子28 分钟前
可以指定端口启动本地前端的npm包
前端·npm·node.js
new code Boy38 分钟前
前端base-64 编码解码
前端·javascript·html