相关问题
PolarDB 如何进行数据通信？
2966浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在OpenHarmony中使用ProtoBuf进行数据通信和存储？
66浏览 • 1回复 待解决
前端页面和原生页面如何进行通信？
382浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中使用异步Promise与前端页面进行通信？
26浏览 • 1回复 待解决
线程间JS对象通过序列化方式进行数据通信，是否存在性能问题
1924浏览 • 1回复 待解决
ArkTS侧与Native侧如何进行map数据交互
2234浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过应用侧调用前端页面的JavaScript函数？
15浏览 • 1回复 待解决
#鸿蒙通关秘籍#我想问下，适配后的应用，如何进行数据迁移的测试？
140浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在前端页面调用应用侧的函数？
20浏览 • 1回复 待解决
FA卡片如何进行数据交互
2163浏览 • 1回复 待解决
HarmonyOS 如何进行数据持久化
348浏览 • 1回复 待解决
#鸿蒙通关秘籍#在线程模型中，如何进行线程间通信？
142浏览 • 1回复 待解决
HarmonyOS如何进行数据文件存储
411浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用共享数据进行ExtensionAbility通信
73浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用DataChangeListener进行数据改变通知？
91浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用DataAbilityHelper进行数据插入操作？
95浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙中如何使用DataAbility进行数据批量操作
77浏览 • 1回复 待解决
HarmonyOS UDMF标准化数据通路如何进行鉴权？
133浏览 • 1回复 待解决
TaskPool线程中如何进行数据库操作？
241浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何对内存状态和统计方式进行数据筛选？
122浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中使用标准化数据通路实现数据更新？
106浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何利用标准化数据通路管理鸿蒙应用的数据共享？
79浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙应用如何进行组件的跨文件复用？
86浏览 • 1回复 待解决
多实例模式下，UIAbility实例间如何进行数据交互
1842浏览 • 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>