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

zbw_apple

1天前

浏览