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

其实就这么简单。

相关推荐
tiantian_cool几秒前
Xcode 导入与使用 SVG 文件矢量图适配全流程
前端
小泥巴呀13 分钟前
手写一个简单的vue——响应系统1
前端·vue.js
ze_juejin16 分钟前
插件化和模块化的对比
前端
前端康师傅17 分钟前
网页为什么会白屏?
前端·http·面试
李剑一17 分钟前
Tauri2.0本地实现导入导出,有坑!
前端·vue.js
执行上下文18 分钟前
Element Plus Upload 添加支持拖拽排序~
前端·javascript·element
forever_Mamba18 分钟前
从重复到优雅:前端筛选逻辑的优化之旅
前端·javascript·性能优化
一个小浪吴呀19 分钟前
生死簿应用
前端
好好好明天会更好19 分钟前
vuedraggable-拖拽插件使用小计
前端
前端付豪21 分钟前
14、✅ 手写 Event Loop 模拟器(理解微任务 / 宏任务调度)
前端·javascript