HarmonyOS 鸿蒙Next中Web组件加载网页空白的问题如何解决

HarmonyOS 鸿蒙Next中Web组件加载网页空白的问题如何解决

【问题现象】

Web组件载入网址时，页面一直是空白的，什么内容都没有显示，但是同样的网址，在计算机浏览器上可以正常打开。

点击放大

【背景知识】

Dom Storage：包含了Session Storage和Local Storage两类，通常在访问需要客户端存储的页面时使用。

类型 生命周期 存储形式
Session Storage 存储与释放跟随会话生命周期，是临时数据 Key-Value
Local Storage 可持久化数据，落盘在应用目录下 Key-Value

Web组件的属性接口domStorageAccess()进行使能配置。

【定位思路】

  1. 排查网络是否正常；
  2. 通过对比浏览器加载和HarmonyOSWeb组件加载的区别，发现浏览器上使用了Dom Storage，Web组件没有开启文档对象模型存储接口（DOM Storage API）权限。

点击放大

【解决方案】

文档对象模型存储接口（DOM Storage API）权限默认是未开启的，需要手动配置domStorageAccess(true)，参考代码如下：

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

  build() {
    Column() {
      Web({ src: 'https://xxx', controller: this.controller })
      .domStorageAccess(true)
    }
  }
}

点击放大

【总结】

当需要加载的网页使用的DOM Storage(sessionStorage与localStorage)时，需要配置属性接口domStorageAccess(true)，否则使用Web加载网页可能会出现空白等异常问题。


更多关于HarmonyOS 鸿蒙Next中Web组件加载网页空白的问题如何解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中Web组件加载网页空白的问题如何解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件加载网页空白的问题

在HarmonyOS Next中，Web组件加载网页空白的问题通常是由于未启用DOM Storage API权限导致的。默认情况下，DOM Storage API是关闭的，需要手动配置domStorageAccess(true)来启用。示例代码如下：

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

  build() {
    Column() {
      Web({ src: 'https://xxx', controller: this.controller })
      .domStorageAccess(true)
    }
  }
}

配置后，Web组件将能够正常加载依赖DOM Storage的网页。

回到顶部