HarmonyOS webloadData不显示内容

import web_webview from '@ohos.web.webview';
import business_error, { BusinessError } from '@ohos.base';

interface ListItem {
  htmlData: string,
  controller?: web_webview.WebviewController
}

@Entry
@Component
struct WebviewDemo {
  @State List: ListItem[] = []
  @State isGetData: boolean = false;

  aboutToAppear(): void {
    setTimeout(() => {
      //模拟请求接口返回数据
      this.List = [
        {
          // htmlData: "<font color='#FF8012'><a style='color:#FF8012'>哈哈哈</a></font>",
          htmlData: '<font color=\'#FF8012\'><a href style=\'color:#FF8012\'>快去看看</a ></font>！',
        }
      ]
      this.List = this.List.map((v: ListItem, i: number) => {
        v.controller = new web_webview.WebviewController()
        return v
      })
      //加载web
      this.isGetData = true
    }, 1000)
  }

  // 封装loadData逻辑到方法中
  private loadDataToWeb(v: ListItem) {
    console.log('tag', JSON.stringify(v))
    v.controller?.loadData(v.htmlData, "text/html", "UTF-8");
  }

  build() {
    Column() {
      if (this.isGetData) {
        ForEach(this.List, (item: ListItem, index: number) => {
          Web({ src: '', controller: item.controller })
            .constraintSize({
              minHeight: 20,
              maxHeight: 50
            })
            .onControllerAttached(() => {
              this.loadDataToWeb(item)
            })
        })
      }
    }
  }
}
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.

HarmonyOS

zxjiu

2024-12-25 14:41:15

浏览

回答 1

按赞同

按时间

zbw_apple

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

参考示例如下：

import web_webview from '@ohos.web.webview';
import business_error, { BusinessError } from '@ohos.base';
import { i18n } from '@kit.LocalizationKit';

interface ListItem {
  htmlData: string,
  controller?: web_webview.WebviewController
}

@Entry
@Component
struct WebLoadDemo {
  @State List: ListItem[] = []
  @State isGetData: boolean = false;

  aboutToAppear(): void {
    let systemLanguage: string = i18n.System.getSystemLanguage(); // systemLanguage为当前系统语言
    console.log('systemLanguage---', systemLanguage)
    setTimeout(() => {
      //模拟请求接口返回数据
      this.List = [
        {
          // htmlData: "<font color='#FF8012'><a style='color:#FF8012'>哈哈哈</a></font>",
          htmlData: '<font color=\'#FF8012\'><a href style=\'color:#FF8012\'>快去看看</a ></font>！',
          // htmlData: '<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>',
        }
      ]
      this.List = this.List.map((v: ListItem, i: number) => {
        v.controller = new web_webview.WebviewController()
        return v
      })
      //加载web
      this.isGetData = true
    }, 1000)
  }

  // 封装loadData逻辑到方法中
  private loadDataToWeb(v: ListItem) {
    console.log('jimjay', JSON.stringify(v))
    v.controller?.loadData(v.htmlData, "text/html", "UTF-8", " ", " ");
  }

  build() {
    Column() {

      if (this.isGetData) {
        ForEach(this.List, (item: ListItem, index: number) => {
          Web({ src: '', controller: item.controller })
            .constraintSize({
              minHeight: 20,
              maxHeight: 50
            })
            .onControllerAttached(() => {
              this.loadDataToWeb(item)
            })
        })
      }
    }
  }
}
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.
57.
58.
59.
60.

2024-12-25 17:07:25

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS webloadData不显示内容

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