HarmonyOS web组件显示h5页面,部分内容丢失

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

网页显示不全可能是如下的原因:

1、页面依赖于dom 存储,需要开启dom存储权限,未开启权限导致js加载报错。

解决方案:需要在web组件中设置domStorageAccess(true)

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#domstorageaccess

2、HTTP和HTTPS混合内容

解决方案:需要设置mixedMode(MixedMode.All)

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#mixedmode

3、UA识别问题

解决方案:可以自行设置UA试一试

this.webViewController.setCustomUserAgent(“Mozilla/5.0 (xxx; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile”)

可以自行按以上三种情况都试一试,demo如下:

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'https://www.huawei.com', controller: this.webviewController})
        .width('100%')
        .height('100%')
        .domStorageAccess(true) //开启文档对象模型存储接口
        .databaseAccess(true) // 是否开启数据库存储API权限
        .mixedMode(MixedMode.All) // 允许加载HTTP和HTTPS混合内容
        .onControllerAttached(() => {
          //设置自定义UserAgent
          this.webviewController.setCustomUserAgent("Mozilla/5.0 (xxx; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
        })
    }
    .width('100%')
    .height('100%')
  }
}

如果仍然无法解决,可以自行开启web调试检查一下H5页面上有无报错,使用Devtools工具调试前端页面:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-debugging-with-devtools-V5

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS Web组件加载在线H5页面
275浏览 • 1回复 待解决
HarmonyOS h5页面缩放问题
592浏览 • 0回复 待解决
HarmonyOS H5页面加载缓存机制
329浏览 • 1回复 待解决
HarmonyOS webview H5页面事件监听
41浏览 • 1回复 待解决
HarmonyOS H5页面localstorage为null
40浏览 • 1回复 待解决
如何使H5页面适配多设备?
790浏览 • 1回复 待解决
如何在HarmonyOS中调试h5页面
954浏览 • 1回复 待解决
HarmonyOS h5页面是否可以适配Harmony OS
548浏览 • 1回复 待解决
Web组件h5页面如何交互?
252浏览 • 1回复 待解决
HarmonyOS H5页面保存图片到本地相册
35浏览 • 1回复 待解决