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

发布于 1周前 作者 vueper 最后一次编辑是 5天前 来自 鸿蒙OS

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

Harmonyos Next教程
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

回到顶部