相关问题
PolarDB 如何进行数据通信?
3237浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在OpenHarmony中使用ProtoBuf进行数据通信和存储?
759浏览 • 1回复 待解决
前端页面和原生页面如何进行通信?
934浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中使用异步Promise与前端页面进行通信?
333浏览 • 1回复 待解决
线程间JS对象通过序列化方式进行数据通信,是否存在性能问题
2379浏览 • 1回复 待解决
HarmonyOS 怎么使用webview建立数据通信
527浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过应用侧调用前端页面的JavaScript函数?
486浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在前端页面调用应用侧的函数?
403浏览 • 1回复 待解决
ArkTS侧与Native侧如何进行map数据交互
2629浏览 • 1回复 待解决
#鸿蒙通关秘籍#我想问下,适配后的应用,如何进行数据迁移的测试?
477浏览 • 1回复 待解决
#鸿蒙通关秘籍#在线程模型中,如何进行线程间通信?
461浏览 • 1回复 待解决
FA卡片如何进行数据交互
2430浏览 • 1回复 待解决
HarmonyOS 如何进行数据持久化
733浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用DataAbilityHelper进行数据插入操作?
435浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用共享数据进行ExtensionAbility通信
664浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用DataChangeListener进行数据改变通知?
584浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙中如何使用DataAbility进行数据批量操作
608浏览 • 1回复 待解决
HarmonyOS如何进行数据文件存储
696浏览 • 1回复 待解决
HarmonyOS 升级next系统如何进行数据迁移
324浏览 • 1回复 待解决
HarmonyOS 页面如何进行一多适配
378浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙应用如何进行组件的跨文件复用?
569浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙中的Router和Navigation如何进行页面切换?
492浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用鸿蒙用户首选项进行数据变更监听?
647浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何对内存状态和统计方式进行数据筛选?
675浏览 • 1回复 待解决
鸿蒙应用侧与前端页面之间可以通过创建消息端口(Message Port)进行数据通信。具体步骤如下:
在应用侧创建两个消息端口,并通过
postMessage()
将一个端口发送到前端页面。typescript // xxx.ets import { webview } from '@kit.ArkWeb';
@Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; messageToSend: string = 'Message from app to page';
build() { Column() { Button('Initialize Ports') .onClick(() => { this.ports = this.controller.createWebMessagePorts(); this.controller.postMessage('init_port', [this.ports[0]], '*'); }) Button('Send Message to Page') .onClick(() => { this.ports[1].postMessageEvent(this.messageToSend); }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } }
在前端页面上,接收从应用侧发送过来的消息端口并进行通信。
html <!-- index.html --> <!DOCTYPE html> <html> <body> <button type="button" onclick="sendToApp()">Send to App</button> <p id="demo"></p> <script> var h5Port; window.addEventListener('message', function (event) { if (event.data === 'init_port') { h5Port = event.ports[0]; h5Port.onmessage = function (event) { document.getElementById("demo").innerHTML = "Received: " + event.data; } } });
</script> </body> </html>