鸿蒙Next客户端如何向网页发送消息

在鸿蒙Next开发中，如何通过客户端向网页发送消息？比如在WebView加载的页面中，需要从原生端触发JS函数或传递数据到前端，有没有具体的API调用方案或代码示例？目前尝试了WebMessagePort但回调不触发，是否有更稳定的实现方式？

2 回复

鸿蒙Next客户端向网页发消息？简单！用 WebMessagePort 建立通信桥梁，postMessage() 当传话筒。记得先让网页端用 addMessageListener() 竖起耳朵听。就像隔空喊话：“嘿，网页！数据到货了！” 代码一写，消息秒达，稳！

更多关于鸿蒙Next客户端如何向网页发送消息的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next客户端中，可以通过Web组件（WebView）的runJavaScriptExt方法向网页发送消息或执行JavaScript代码。以下是具体实现步骤：

1. 在ArkTS中创建Web组件并加载网页

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 创建Web组件并绑定控制器
      Web({ src: 'https://example.com', controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

2. 向网页发送消息/执行JavaScript

使用控制器的runJavaScriptExt方法：

// 执行JavaScript代码（例如调用网页中的函数）
this.controller.runJavaScriptExt({
  script: 'window.postMessage("Hello from HarmonyOS!", "*")',
  callback: (result) => {
    console.log('JavaScript执行结果:', result);
  }
});

// 或调用网页中已定义的函数
this.controller.runJavaScriptExt({
  script: 'receiveMessage("HarmonyOS Data")',
  callback: (result) => {
    console.log('函数调用结果:', result);
  }
});

3. 网页端接收消息（示例）

在网页的JavaScript中监听消息：

<script>
// 监听message事件
window.addEventListener('message', (event) => {
  console.log('收到客户端消息:', event.data);
  // 处理业务逻辑
});

// 定义供客户端调用的函数
function receiveMessage(data) {
  console.log('收到客户端数据:', data);
  return 'ACK'; // 可返回结果给客户端
}
</script>

注意事项：

  1. 跨域限制：确保网页允许跨域通信，或使用同源网页
  2. 时机控制：在网页加载完成后调用（可通过onPageEnd事件监听）
  3. 错误处理：在callback中处理JS执行异常
  4. 数据格式：复杂数据建议使用JSON序列化

完整调用示例：

// 在页面加载完成后发送消息
Web({ src: 'https://example.com', controller: this.controller })
  .onPageEnd(() => {
    this.controller.runJavaScriptExt({
      script: `window.postMessage(${JSON.stringify({type: 'sync', data: 'test'})}, "*")`,
      callback: (result) => {
        if (result.error) {
          console.error('执行失败:', result.error);
        } else {
          console.log('执行成功:', result.result);
        }
      }
    });
  })

通过这种方式即可实现鸿蒙客户端与网页的双向通信。

回到顶部