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

其实就这么简单。

相关推荐
紫禁玄科8 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
东风破_9 小时前
后端API没写好,前端难道干等着吗?
前端
百变梦仔9 小时前
从读项目到纠偏交付:我把 Codex 前端任务闭环升级成了第二版
前端
用户938515635079 小时前
从前后端分离到前端接口工程:React + MockJS + Vite 解析
前端·后端·全栈
用户938515635079 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformers.js 全链路实战(三)
前端·react.js·typescript
excel9 小时前
当前端行情变差,我们为什么还要坚持?
前端
鸿是江边鸟,曾是心上人10 小时前
快速搭建HTTPS本地开发环境
前端
To_OC10 小时前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
Sterting10 小时前
第9课 Vue Router 路由
前端·vue.js
用户0595401744611 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css