HarmonyOS Web组件加载html字符串无法引用本地文件

操作步骤:

1、在组件的build方法中初始化Web组件

2、在某个时间点使用WebviewController类调用loadData方法,加载html字符串

3、通过监听onInterceptRequest事件,解决资源跨域问题。在onInterceptRequest事件中,得到html中引用到的css、js、图片等资源路径,读取文件后构造WebResourceResponse,最后返回即可加载完整的H5页面。在5.0.0版本以前是可以的,但是在5.0.0版本中,这里拿不到引用的资源路径,而是html字符串拼一个’ data:text/html,'前缀后的字符串

4、详细代码如下

import { webview } from '@kit.ArkWeb';
import { hilog } from '@kit.PerformanceAnalysisKit';

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

  build() {
    Column() {
      Web({src: '', controller: this.controller})
        .width('100%')
        .height('90%')
        .onInterceptRequest((event)=> {
          let request = event?.request

          let requestUrl = request?.getRequestUrl() as string
          // requestUrl 在以前版本会返回 html中引用到的css、js、图片等文件路径
          // 在此处读取文件后构造WebResourceResponse,最后返回即可加载完整的H5页面
          hilog.info(0x0000, 'testTag', '%{public}s', requestUrl)

          return null
        })
      Row() {
        Button('Load Html String', { type: ButtonType.Normal, stateEffect: true })
          .onClick(() => {
            let htmlString = "<html>\n" +
              "<head>\n" +
              "<meta name='viewport' content='width=device-width,initial-scale=1'>\n" +
              "</head>\n" +
              "<body>\n" +
              "<script crossorigin src='./js/script.js'></script>\n" +
              "</body>\n" +
              "</html>"
            this.controller.loadData(htmlString, 'text/html', 'UTF-8')
          })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(150)
          .height(40)
          .alignRules({
            middle: {anchor: '__container__', align: HorizontalAlign.Center}
          })
      }
      .height('10%')
      .width('100%')

    }
    .backgroundColor(Color.Black)
  }
}
HarmonyOS
2025-01-09 17:28:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

原因是在原来的版本中,使用的是自定义协议,但是在更新版本后,loadData接口不支持自定义协议了,所以会使用一个data url返回值。

使用customizeSchemes接口配置了对应的自定义协议,问题就解决了。

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#customizeschemes

分享
微博
QQ
微信
回复
2025-01-09 19:45:03
相关问题
HarmonyOS Web组件如何加载html字符串
1233浏览 • 1回复 待解决
HarmonyOS web组件怎么加载html字符串
324浏览 • 1回复 待解决
Web如何使用loadData加载复杂Html字符串
2674浏览 • 1回复 待解决
如何使用Web组件加载本地html文件
1249浏览 • 1回复 待解决
HarmonyOS 读取本地json文件转成字符串
427浏览 • 1回复 待解决
HarmonyOS 如何支持html格式字符串
365浏览 • 1回复 待解决
HarmonyOS List上展示html字符串
548浏览 • 1回复 待解决
HarmonyOS Web组件加载html文件异常
1033浏览 • 1回复 待解决
web组件html文件加载
1176浏览 • 1回复 待解决
HarmonyOS SVG字符串加载的问题
326浏览 • 1回复 待解决
emoji字符串无法进行截取
1100浏览 • 1回复 待解决
Web组件接收超长的字符串时会被截断
475浏览 • 1回复 待解决