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
赞
收藏 0
回答 1
相关问题
HarmonyOS web组件加载本地HTML字符串时无法自适应高度
943浏览 • 1回复 待解决
HarmonyOS Web组件如何加载html字符串
1730浏览 • 1回复 待解决
HarmonyOS web组件怎么加载html字符串
663浏览 • 1回复 待解决
Web如何使用loadData加载复杂Html字符串
3253浏览 • 1回复 待解决
HarmonyOS web组件 src属性是否可传html字符串
547浏览 • 1回复 待解决
HarmonyOS webview加载html字符串不能完全显示
920浏览 • 1回复 待解决
如何使用Web组件加载本地的html文件?
1791浏览 • 1回复 待解决
HarmonyOS web加载本地沙箱HTML和JS文件无法显示
1855浏览 • 1回复 待解决
HarmonyOS 读取本地json文件转成字符串
913浏览 • 1回复 待解决
HarmonyOS 如何支持html格式字符串?
654浏览 • 1回复 待解决
HarmonyOS List上展示html字符串
793浏览 • 1回复 待解决
应用引用media中的字符串资源如何拼接字符串
272浏览 • 0回复 待解决
ets Web加载本地html文件,本地路径该怎么写
3863浏览 • 1回复 待解决
HarmonyOS Web组件加载html文件异常
1451浏览 • 1回复 待解决
web组件对html文件的加载
1639浏览 • 1回复 待解决
HarmonyOS web组件如何使用html加载下载到设备本地的文件
885浏览 • 1回复 待解决
HarmonyOS web组件内的html如何加载本地资源?
1793浏览 • 1回复 待解决
HarmonyOS 长字符串写入本地文件需要使用哪个方法
650浏览 • 1回复 待解决
HarmonyOS 使用web组件loadData加载html文件白屏
1085浏览 • 1回复 待解决
HarmonyOS SVG字符串加载的问题
825浏览 • 1回复 待解决
emoji字符串无法进行截取
1383浏览 • 1回复 待解决
HarmonyOS web加载的本地html需要前端路由
870浏览 • 1回复 待解决
web组件加载html页面,无法执行jscript脚本
1796浏览 • 1回复 待解决
Web组件接收超长的字符串时会被截断
903浏览 • 1回复 待解决
HarmonyOS 有个字符串资源文件,后面怎么拼接字符串?
1775浏览 • 1回复 待解决
原因是在原来的版本中,使用的是自定义协议,但是在更新版本后,loadData接口不支持自定义协议了,所以会使用一个data url返回值。
使用customizeSchemes接口配置了对应的自定义协议,问题就解决了。
参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#customizeschemes