HarmonyOS 鸿蒙Next webview 加载 H5 需要在页面开始加载时通过 localStorage 注入方式保存参数，H5 会取 localStorage 中的值进行加载，如何实现？

HarmonyOS 鸿蒙Next webview 加载 H5 需要在页面开始加载时通过 localStorage 注入方式保存参数，H5 会取 localStorage 中的值进行加载，如何实现？

iOS 可以通过 WebView 的evaluateJavaScript 方法写入数据: 
webView.evaluateJavaScript(“window.localStorage.setItem(‘XrmBaseUrl’,’” + GlobalAppSetting.baseUrl + “’);”, completionHandler: nil)
，鸿蒙该如何实现？


更多关于HarmonyOS 鸿蒙Next webview 加载 H5 需要在页面开始加载时通过 localStorage 注入方式保存参数，H5 会取 localStorage 中的值进行加载，如何实现？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
可以通过runJavaScript方法异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。详细信息参考如下文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#runjavascript

通过runJavaScript来实现，示例如下：

Web({

  src: "www",

  controller: this.controller,

  renderMode: RenderMode.SYNC_RENDER

})

  .domStorageAccess(true)

  .fileAccess(true)

  .mixedMode(MixedMode.All)

  .width('100%')

  .backgroundColor(Color.Orange)

  .onPageEnd(e => {

    try {

      this.controller.runJavaScript(

        "window.localStorage.setItem('XrmBaseUrl','test123');",

        (error, result) => {

          if (error) {

            console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);

            return;

          }

          if (result) {

            this.webResult = result;

            console.info(`The test() return value is: ${result}`);

          }

        });

      if (e) {

        console.info('url: ', e.url);

      }

    } catch (error) {

      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);

    }

  })

更多关于HarmonyOS 鸿蒙Next webview 加载 H5 需要在页面开始加载时通过 localStorage 注入方式保存参数，H5 会取 localStorage 中的值进行加载，如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，通过webview加载H5页面并在页面开始加载时通过localStorage注入参数，可以通过以下步骤实现：

  1. 创建WebView并配置： 使用WebView组件加载H5页面，确保WebView已正确初始化并配置。

  2. 获取WebView的WebResourceClient： 通过WebView获取WebResourceClient实例，用于处理页面加载前的操作。

  3. 拦截页面加载事件： 重写WebResourceClient的shouldInterceptRequest方法，在H5页面开始加载时执行自定义逻辑。

  4. 注入localStorage参数： 在shouldInterceptRequest方法中，通过JavaScript注入localStorage参数。例如，使用javascript:localStorage.setItem('key', 'value');来设置参数。

  5. 执行JavaScript注入： 通过WebView的evaluateJavascript方法执行上述JavaScript代码，确保在页面加载前完成localStorage的注入。

  6. 加载H5页面： 继续加载H5页面，此时H5页面可以从localStorage中获取到已注入的参数。

示例代码（简化）：

webView.getWebResourceClient().shouldInterceptRequest(/* parameters */) {
    webView.evaluateJavascript("localStorage.setItem('key', 'value');", null);
    return null; // Continue loading the page
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部