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)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
HarmonyOS
2025-01-09 17:28:56
1028浏览
收藏 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字符串
1730浏览 • 1回复 待解决
HarmonyOS web组件怎么加载html字符串
663浏览 • 1回复 待解决
Web如何使用loadData加载复杂Html字符串
3253浏览 • 1回复 待解决
如何使用Web组件加载本地html文件
1791浏览 • 1回复 待解决
HarmonyOS 读取本地json文件转成字符串
913浏览 • 1回复 待解决
HarmonyOS 如何支持html格式字符串
654浏览 • 1回复 待解决
HarmonyOS List上展示html字符串
793浏览 • 1回复 待解决
HarmonyOS Web组件加载html文件异常
1451浏览 • 1回复 待解决
web组件html文件加载
1639浏览 • 1回复 待解决
HarmonyOS SVG字符串加载的问题
825浏览 • 1回复 待解决
emoji字符串无法进行截取
1383浏览 • 1回复 待解决
Web组件接收超长的字符串时会被截断
903浏览 • 1回复 待解决