HarmonyOS 鸿蒙Next中web组件无法加载Html内容

HarmonyOS 鸿蒙Next中web组件无法加载Html内容

List() {
  ListItem() {
    Button('loadData')
      .onClick(() => {
        try {
          // 点击按钮时，通过loadData，加载HTML格式的文本数据
          this.controller.loadData(
            `<html><body bgcolor=\"white\"><span style=\"color:#636366;font-size:14px;background-color:#FFFFFF;\">静静地静静地觉得好的话好多好多好多好多好多的话</span></body></html>`,
            "text/html",
            "UTF-8",
          );

        } catch (error) {
          console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
        }
      })
  }

  ListItem() {
    //Web({ src: this.htmlStr, controller: this.controller })
   Web({ src: '', controller: this.controller })
     .darkMode(WebDarkMode.Off)
       // 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
     .domStorageAccess(true)
       // 设置是否支持手势进行缩放，默认允许执行缩放。
     .zoomAccess(true)
       // 设置是否开启应用中文件系统的访问。$rawfile(filepath/filename)中rawfile路径的文件不受该属性影响而限制访问。
     .fileAccess(true)
       // 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。
     .mixedMode(MixedMode.All)
       // 设置缓存模式
     .cacheMode(CacheMode.Default)
       //设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。
     //.verticalScrollBarAccess(!this.hiddenScrollBar)
       // 设置是否允许执行JavaScript脚本，默认允许执行。
     .javaScriptAccess(true)
     .width('100%')
  }
}

其中里面的html内容<html><body bgcolor=\"white\"><span style=\"color:#636366;font-size:14px;background-color:#FFFFFF;\">静静地静静地觉得好的话好多好多好多好多好多的话</span></body></html>，无法加载，但是我把span里面的样式style=\"color:#636366;font-size:14px;background-color:#FFFFFF;\"去掉后又可以正常加载，这是什么原因？不能加样式的吗？


更多关于HarmonyOS 鸿蒙Next中web组件无法加载Html内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

#符号在URL中表示锚点定位标识，当使用loadData()加载包含#的HTML内容时，系统可能将其误解析为URL片段标识符，导致内容截断或加载失败。

示例问题代码中的color:#636366和background-color:#FFFFFF均包含未转义的#字符。

将HTML内容中的#字符替换为URL编码%23：

this.controller.loadData(
  `<html><body bgcolor=\"white\"><span style=\"color:%23636366;font-size:14px;background-color:%23FFFFFF;\">...</span></body></html>`,
  "text/html",
  "UTF-8"
);

更多关于HarmonyOS 鸿蒙Next中web组件无法加载Html内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


#是特殊字符哦！ 

loadData使用不同的参数会有不同的效果，如果参数不对可能会造成白屏现象。如果html中存在非法字符，例如css中的color: “#333”，有"#"的时候会加载不了，建议将baseUrl和historyUrl两个参数的值设置为"空格"即可解决问题。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  updataContent: string = '<body><div><image src="resource://rawfile/xxx.png" alt="image -- end" width="500" height="250"></image></div></body>'
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // UTF-8为charset。
            this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " ");
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

加载出来了，可是字体变得好小好小，font-size:14px应该不小的呀，是不是字体被转换了？

不是哦，这是所有手机web组件的通病，包括iOS也是一样。需要在HTML的head标签中加入：<meta charset="utf-8">，<meta name="viewport" content="width=device-width, initial-scale=1.0" />，

loadData使用不同的参数会有不同的效果，如果参数不对可能会造成白屏现象。如果html中存在非法字符，例如css中的color: “#333”，有"#“的时候会加载不了，需要使用文档中提供的加载本地资源的方法，后面两个参数要设置为空格” “，” "。修改代码：

this.controller.loadData(
  `<html><body bgcolor=\"white\"><span style=\"color:#636366;font-size:14px;background-color:#FFFFFF;\">静静地静静地觉得好的话好多好多好多好多好多的话</span></body></html>`,
  "",
  "",
);

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

我用你上边的代码，为什么还是无法加载出来，白屏，没有报错，你们那边有测试过吗？

静静地静静地觉得好的话好多好多好多好多好多的话

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

鸿蒙Next中Web组件无法加载HTML内容，主要原因是鸿蒙Next版本移除了WebView内核，不再支持web组件直接加载本地或网络HTML。系统设计转向更安全的ArkWeb组件，需使用ArkWeb并遵循新的安全策略。

在HarmonyOS Next中，Web组件的loadData方法对HTML字符串的格式要求较为严格。您遇到的问题很可能是由于HTML字符串中的引号转义导致的。

问题分析： 在您的代码中，传递给loadData的HTML字符串使用了反引号（模板字符串），但字符串内部又对双引号进行了转义（\"）。在HarmonyOS Next的Web组件实现中，这种多层转义可能导致HTML解析器无法正确识别样式属性中的引号，从而使得整个HTML内容加载失败。

解决方案：

  1. 简化字符串格式：避免在HTML属性值中使用转义的双引号。可以直接使用单引号包裹属性值，或者调整字符串拼接方式。

    修改后的示例：

    this.controller.loadData(
  `<html><body bgcolor='white'><span style='color:#636366;font-size:14px;background-color:#FFFFFF;'>静静地静静地觉得好的话好多好多好多好多好多的话</span></body></html>`,
  "text/html",
  "UTF-8"
);

  2. 使用Base64编码：对于复杂HTML内容，建议使用Base64编码方式加载，可以避免转义字符问题：

    const htmlContent = `<html><body bgcolor="white"><span style="color:#636366;font-size:14px;background-color:#FFFFFF;">静静地静静地觉得好的话好多好多好多好多好多的话</span></body></html>`;
const base64Content = Base64.encode(htmlContent);
this.controller.loadData(
  `data:text/html;base64,${base64Content}`,
  null,
  null
);

  3. 检查样式语法：确保CSS样式值符合规范，特别是颜色值中的#符号和分号分隔符要正确。

根本原因： 当样式字符串中包含转义引号时，Web内核在解析HTML时可能将转义序列\"错误地解释为字符串的一部分，而不是引号字符的转义表示，导致DOM构建失败。移除样式后，HTML结构变简单，解析器能够正确处理。

这不是HarmonyOS Next禁止使用样式，而是字符串转义处理的问题。建议使用更简洁的字符串格式或Base64编码来确保HTML内容正确加载。

回到顶部