HarmonyOS鸿蒙Next中Web组件加载富文本失败如何处理

HarmonyOS鸿蒙Next中Web组件加载富文本失败如何处理

【问题现象】

在Web组件中使用loadData方式加载富文本（从后台服务获取）失败。问题效果如下图，最开始下方展示example网页，点击loadData按钮后无法展示。

点击放大 点击放大

问题代码如下：

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
export struct Index3 {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              '<body>\n' +
                '<div">\n' +
                '<p><strong>' +
                '<span style="font-size: 24px; color: rgb(34, 34, 34)">' +
                '<mark data-color="#FF5E5E style="background-color: #FF5E5E; color: inherit">' +
                '特别提示：Test: LoadData Test！' +
                '</mark>' +
                '</span>' +
                '</strong>\n' +
                '</p>\n' +
                '</div>\n' +
                '</body>',
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

【背景知识】

使用Web组件加载页面有两种方式：

  • loadUrl加载网络/本地页面。
  • loadData加载HTML格式文本数据。

【解决方案】

本次案例中是使用loadData的方式加载HTML文本数据，该方式对于CSS样式需要特殊处理：CSS样式中“#”为特殊字符，需要转义为“%23”。

代码示例如下

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
export struct Index3 {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              '<body>\n' +
                '<div">\n' +
                '<p><strong>' +
                '<span style="font-size: 24px; color: rgb(34, 34, 34)">' +
                '<mark data-color="%23FF5E5E style="background-color: %23FF5E5E; color: inherit">' +
                '特别提示：Test: LoadData Test！' +
                '</mark>' +
                '</span>' +
                '</strong>\n' +
                '</p>\n' +
                '</div>\n' +
                '</body>',
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

修改效果如下：

点击放大 点击放大

【总结】

Web开发中特殊字符需要转义，除了#号字符外其余常见转义符号对照关系如下：

特殊字符 URL用途 转义方式
+ 表示空格 %2B
空格 应换用加号 + 或%20 表示 %20
/ 分隔目录和子目录 %2F
? 分隔实际的 URL 和参数 %3F
% 指定特殊字符 %25
# 表示书签 %23
& URL中指定的参数间的分隔符 %26
= URL中指定参数的值 %3D
! URL中指定参数的值 %21

更多关于HarmonyOS鸿蒙Next中Web组件加载富文本失败如何处理的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Web组件加载富文本失败如何处理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件加载富文本失败的原因

在HarmonyOS鸿蒙Next中，Web组件加载富文本失败的原因是由于CSS样式中“#”为特殊字符，需要转义为“%23”。以下是修改后的代码示例：

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
export struct Index3 {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadData(
              '<body>\n' +
                '<div">\n' +
                '<p><strong>' +
                '<span style="font-size: 24px; color: rgb(34, 34, 34)">' +
                '<mark data-color="%23FF5E5E style="background-color: %23FF5E5E; color: inherit">' +
                '特别提示：Test: LoadData Test！' +
                '</mark>' +
                '</span>' +
                '</strong>\n' +
                '</p>\n' +
                '</div>\n' +
                '</body>',
              "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: 'www.example.com', controller: this.controller })
    }
  }
}

通过将“#”转义为“%23”，问题得到解决。

回到顶部