HarmonyOS开发者社区

#智解鸿蒙用 Web 组件加载 H5 页面，调用鸿蒙原生方法偶尔失败，报 “JSBridge 未初始化”？

土豆说 2025-11-28 17:20:29

鸿蒙问答专区

H5 通过window.harmonyBridge.postMessage调用原生方法，大部分时候正常，偶尔报错，尤其是页面加载快的时候：

Web({ src: $rawfile('index.html'), controller: this.webCtrl })
  .width('100%')
  .height('100%')
  .onBridgeMessage((msg) => {
    console.log('H5调用原生：', msg);
  })

h5的

window.onload = function() {
  setTimeout(() => {
    window.harmonyBridge.postMessage('getUserInfo'); // 偶尔报harmonyBridge is undefined
  }, 100);
};

是不是需要等 Web 组件完全初始化后再让 H5 调用？怎么判断 Web 组件的 JSBridge 准备好了？

写回答

全部评论(1)

Devil枫

1 楼

看了下你的代码。基本确定页面中出现 H5 调用鸿蒙原生方法偶尔失败且报 “JSBridge 未初始化” 的问题，核心原因是H5 发起调用时，Web 组件的 JSBridge 尚未完成初始化。页面加载速度快的场景下，setTimeout 设置的 100 毫秒延迟不足以覆盖 JSBridge 的初始化耗时，导致 window.harmonyBridge 未定义，进而调用失败。

解决方法可以这样做，监听 Web 组件的 JSBridge 初始化完成事件：鸿蒙 Web 组件提供了明确的生命周期回调，可通过onLoadFinish事件判断 H5 页面加载完成且 JSBridge 初始化就绪，再通知 H5 发起原生方法调用，这是最可靠的方式。

// 鸿蒙端代码（ets）
Web({ src: $rawfile('index.html'), controller: this.webCtrl })
  .width('100%')
  .height('100%')
  .onLoadFinish((event) => {
    // 页面加载完成，JSBridge已初始化，通知H5可以调用原生方法
    if (event.result) {
      this.webCtrl.runJavaScript('bridgeReady()'); // 调用H5定义的全局函数
    }
  })
  .onBridgeMessage((msg) => {
    console.log('H5调用原生：', msg);
  })

2025-11-29 08:24:10