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

其实就这么简单。

相关推荐
古茗前端团队14 分钟前
急招!前端|测试|后端|产品(名额多,速来)
前端·后端·架构
Lsx_1 小时前
不只是 Prompt:用 Superpowers Skill 给 AI 编程装上工程化工作流
前端·ai编程·claude
小碗细面1 小时前
前端 Prompt 工程实战:如何搭建场景化 Prompt 库
前端·ai编程
阿瑞IT1 小时前
2026年 AI Agent 生产化落地全景:四大高频故障根因分析与工程解法
前端
木木剑光1 小时前
我开源了一个 React 组件库,沉淀了多个高频组件和实用 Hooks
前端·javascript·react.js
kyriewen1 小时前
DeepSeek API 高峰时段涨价 2 倍,便宜大碗的时代要结束了?
前端·ai编程·deepseek
Moment2 小时前
牛逼,NextJs 从 16.3 开始全面拥抱 Agent Native 🥰🥰🥰
前端·后端·面试
沸点小助手2 小时前
6月沸点活动获奖名单公示|本周互动话题上新🎊
前端·后端
Csvn2 小时前
React 19 `use()` 来了:以后数据加载可以不用 useEffect?
前端·react.js
没落英雄2 小时前
从零开始搭建一个 AI Agent —— LangChain + TypeScript 实战手记
前端·人工智能·架构