HarmonyOS 鸿蒙Next Web组件网页显示异常

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web组件网页显示异常

咨询描述：用Web组件加载链接https://appdx.cnzsqh.com:18027/#/baseData?nohead=0 ，
网页显示异常：比如，PC 和安卓上打开顶部有红色的导航头，鸿蒙测试机上打开没有，并且底部是透明的。麻烦请教下这种情况如何处理。


更多关于HarmonyOS 鸿蒙Next Web组件网页显示异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

此问题出现原因是网页使用了domStorge存储，需要添加.domStorageAccess(true)。以下简单示例，未出现图片描述问题：

import fs from '@ohos.file.fs';
import { BusinessError } from '@kit.BasicServicesKit';
import { unzipToDirectory } from '@ohos/minizip';

@Entry
@Component
struct Page240624161324069 {
  @State context: Context = getContext(this);

  build() {
    Column() {
      Row() {
        Button('jszip unzip testpwd').onClick(() => {
          const content = this.context.resourceManager.getRawFileContentSync("testpwd.zip");
          let file2 = fs.openSync(this.context.filesDir + '/testpwd.zip', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
          
          fs.writeSync(file2.fd, content.buffer);
          fs.close(file2);

          unzipToDirectory(this.context.filesDir + '/testpwd.zip', this.context.filesDir + '/unziptestpwd', '123456').then((result) => {
            console.log(result);
          }).catch((err: BusinessError) => {
            console.log(err.message);
          });
        })
        .width('100%');
      }
      .height('100%');
    }
    .height('100%');
  }
}

更多关于HarmonyOS 鸿蒙Next Web组件网页显示异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS鸿蒙Next Web组件网页显示异常的问题，以下是一些可能的解决方案：

  1. 检查URL格式和内容：

    • 确保URL格式正确，且不含特殊字符或已进行正确转义。
    • 检查网页内容是否兼容鸿蒙系统，包括HTML、CSS、JavaScript等代码。

  2. 配置Web组件：

    • 确保Web组件的src属性指向正确的资源地址。
    • 配置MixedMode为MixedMode.All，以允许加载HTTP和HTTPS混合内容。
    • 在module.json5中设置requestPermissions属性，确保包含ohos.permission.INTERNET权限。

  3. 检查网络连接和服务器状态：

    • 确保设备已连接到稳定的网络。
    • 验证目标网址的服务器状态，确保服务正常。

  4. 审查CSP和CORS策略：

    • 使用内容安全策略（CSP）控制允许加载的内容。
    • 检查跨域资源共享（CORS）策略，确保没有限制导致Web组件无法加载外部资源。

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

回到顶部