HarmonyOS鸿蒙Next中js桥中传参给到webview页面

HarmonyOS鸿蒙Next中js桥中传参给到webview页面 在js桥中如何传递参数，然后在webview页面来接收呢

例如：

js桥中有一个方法，是用来通知webview页面关闭原生的顶部导航栏，，当H5调用这个桥时，webview页面就会关闭原生的顶部导航栏，除了使用emitter方法，还有其他方式可以传递吗？

2 回复

在HarmonyOS鸿蒙Next中，JS桥通过postMessage方法将参数传递给WebView页面。WebView组件需监听message事件接收数据，使用onMessage回调处理参数。传递的数据需为字符串或可序列化对象。示例：JS桥调用postMessage({key: value})，WebView通过onMessage(event)获取event.data中的参数。

更多关于HarmonyOS鸿蒙Next中js桥中传参给到webview页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，除了使用Emitter方式，还可以通过以下方法在JS桥中传递参数给WebView页面：

  1. 使用URL参数传递
    在JS桥中构建带参数的URL，通过loadUrl()加载到WebView中。WebView页面通过解析URL获取参数。
    示例：

    // JS桥中
let params = "hideNav=true";
webview.loadUrl("https://example.com?" + params);

    WebView页面通过JavaScript解析URL中的hideNav参数。

  2. 通过evaluateJs方法注入参数
    使用WebView的evaluateJs方法直接执行JavaScript代码，将参数传递给WebView页面。
    示例：

    // JS桥中
let script = "window.receiveBridgeData({ hideNav: true });";
webview.evaluateJs(script);

    WebView页面需预先定义window.receiveBridgeData函数来处理参数。

  3. 利用postMessage与WebView交互
    在JS桥中通过postMessage向WebView发送消息，WebView监听message事件接收参数。
    示例：

    // JS桥中
webview.postMessage({ type: "hideNav", data: true });

    WebView中通过以下方式接收：

    window.addEventListener("message", (event) => {
  if (event.data.type === "hideNav") {
    // 处理隐藏导航栏逻辑
  }
});

以上方法均能实现参数传递，选择取决于具体场景。例如，evaluateJs适合直接调用WebView内函数，而postMessage更适合异步通信。

回到顶部