HarmonyOS 鸿蒙Next 动态加载html片段 显示空白问题

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 动态加载html片段 显示空白问题

<div><span style=“color: #666666;”>欢迎您使用大美果洛客户端！</span></div> --------加载空白 <html><body><div style=‘color: rgb(100,100,255)’>欢迎您使用大美果洛客户端！</div></body></html> --------加载成功 在多种场景下，无法避免#号


更多关于HarmonyOS 鸿蒙Next 动态加载html片段 显示空白问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

若html中的富文本中带有注入#等特殊字符，建议使用带有两个空格的loadData函数，将baseUrl和historyUrl置为空。

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-webview-0000001813416660#ZH-CN_TOPIC_0000001813416660__loaddata

demo如下：

// xxx.ets

import web_webview from '[@ohos](/user/ohos).web.webview';
import business_error from '[@ohos](/user/ohos).base';

[@Entry](/user/Entry)

[@Component](/user/Component)

struct WebComponent {

  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {

    Column({space:30}) {

      Button('loadData with #')

        .onClick(() => {

          try {

            // 点击按钮时，通过loadData，加载HTML格式的文本数据

            this.controller.loadData(

              "<html><body bgcolor=\"white\"><div><span style= \"color:#0909F7\" >欢迎您使用大美果洛客户端！</span></div></body></html>

更多关于HarmonyOS 鸿蒙Next 动态加载html片段 显示空白问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以将文本转成base64格式再放入web组件中

针对HarmonyOS 鸿蒙Next动态加载HTML片段显示空白的问题，以下是一些可能的解决方案：

  1. 检查网络状态：确保设备处于联网状态，且应用已添加网络权限ohos.permission.INTERNET，以便正确加载在线HTML内容。
  2. 验证HTML内容：使用浏览器打开要加载的HTML片段，验证其是否存在语法错误或无法正确显示的问题。
  3. 特定字符处理：如果HTML内容中包含特殊字符如“#”，尝试对其进行转义（如转换成%23）或进行base64编码，以避免因字符解析问题导致的白屏。
  4. 检查WebView组件：确保WebView组件已正确初始化，并检查其加载HTML内容的代码逻辑是否存在错误。同时，验证WebView组件是否与当前HarmonyOS版本兼容。
  5. 调试和日志：利用Devtools等工具调试前端页面，查看是否有报错信息。同时，检查应用日志，以获取更多关于加载过程的详细信息。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部