HarmonyOS 鸿蒙Next Web通过loadData加载html不显示内容
HarmonyOS 鸿蒙Next Web通过loadData加载html不显示内容 文章详情展示，html模板是在rawfile中，里面的具体内容是从文章接口中获取
html中带了color:#FC6626这种颜色样式，就显示不出来里面的文字
如果不想转译字符在能确保html字符串是安全的情况下也可以直接在html模版中使用innerHTML渲染
更多关于HarmonyOS 鸿蒙Next Web通过loadData加载html不显示内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
import web_webview from ‘@ohos.web.webview’; import business_error from ‘@ohos.base’;
@Entry @Component struct WebPage { controller: web_webview.WebviewController = new web_webview.WebviewController(); htmlStr = `<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="aplus-terminal" content="1"> <meta name="format-detection" content="telephone=no,email=no,adress=no"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <meta name="aplus-touch" content="1"> </head> <body>//
build() {
Column() {
Button(‘loadData’)
.onClick(() => {
try {
this.controller.loadData(this.htmlStr, “text/html”, “UTF-8”, " ", " ")
} catch (error) {
let e: business_error.BusinessError = error as business_error.BusinessError;
console.error(ErrorCode: ${e.code}, Message: ${e.message});
}
})
Web({ src: ‘’, controller: this.controller })
}
}
}
web使用loadData渲染html的时候需要转译字符
| 特殊字符 | URL用途 | 转义方式 |
|---|---|---|
| + | 表示空格 | %2B |
| 空格 | 应换用加号 + 或%20 表示 | %20 |
| / | 分隔目录和子目录 | %2F |
| ? | 分隔实际的 URL 和参数 | %3F |
| % | 指定特殊字符 | %25 |
| # | 表示书签 | %23 |
| & | URL中指定的参数间的分隔符 | %26 |
| = | URL中指定参数的值 | %3D |
| ! | URL中指定参数的值 | %21 |
针对HarmonyOS（鸿蒙）Next Web通过loadData加载HTML不显示内容的问题，可能的原因及解决方案如下：
-
WebView配置问题：
- 确保WebView组件已正确初始化并添加到布局中。
- 检查WebView是否已启用JavaScript支持，使用
getSettings().setJavaScriptEnabled(true)。
-
HTML数据格式：
- 确认加载的HTML数据格式正确，无语法错误。
- 如果HTML包含外部资源（如图片、CSS、JS文件），确保这些资源的路径正确且可访问。
-
权限问题：
- 检查应用是否已申请并授予了必要的网络访问权限。
- 如果HTML内容依赖于网络请求，确保网络请求未被防火墙或安全软件拦截。
-
加载方法：
- 使用
loadDataWithBaseURL而非loadData，loadDataWithBaseURL允许指定一个baseURL来处理相对路径的资源加载。 - 示例：
webView.loadDataWithBaseURL(null, htmlData, "text/html", "UTF-8", null);，其中null可以替换为资源的基础URL。
- 使用
-
系统或版本问题：
- 检查是否为鸿蒙系统的特定版本bug，尝试在不同版本的鸿蒙设备上复现问题。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html
