HarmonyOS Text解析展示带html标签的文本，为什么解析出来高度非常的高，想让它高度随自身内容高度

Text解析展示带html标签的文本，为什么解析出来高度非常的高，想让它高度随自身内容高度。

HarmonyOS

superinsect

2024-12-25 15:01:26

浏览

回答 1

按赞同

按时间

zxjiu

若html中的富文本中带有注入#等特殊字符，建议使用带有两个空格的loadData函数，将baseUrl和historyUrl置为空。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#loaddata

参考示例如下：

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

@Entry
@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>",
              "text/html",
              "UTF-8",
              " ",
              " "
            );
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
          }
        })

      Button('loadData without #')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html>" +
                "<body bgcolor=\"white\">" +
                "<div>" +
                "<span style=\"color: rgb(255,100,100);\">" +
                "测试测试测试测试测试测试" +
                "</span>" +
                "</div>" +
                "</body>" +
                "</html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
          }
        })
      // 组件创建时，加载xxxx
      Web({ src: 'xxx', controller: this.controller })
    }
    .width("100%").height("100%").justifyContent(FlexAlign.Center)
  }
}
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.
52.
53.
54.
55.
56.

2024-12-25 17:09:23

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Text解析展示带html标签的文本，为什么解析出来高度非常的高，想让它高度随自身内容高度

订阅鸿蒙技术特刊，精选内容抢先看