HarmonyOS WebView loaddata 无法完全展示html中的内容

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() { 
      Button('loadData') 
        .onClick(() => { 
          try { 
            this.controller.loadData( 
              '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=1.0, user-scalable=no"/></head><body><br><br><b>ffffffff</b><i style="font-weight: bold;">ffffff</i><font color="#ef432c" size="4">ffffffffff</font><font color="#00ff00" size="4">ffffffff</font><font color="#0000ff" size="4">ffffff<font size="4"><b>ffffffff</b><font size="4">ffffff<b>ffffff</b><font size="4">ffffffff<b>fffffff<i>fffffffff<font size="4">fffffff</font></i></b></font></font></font></font> 发自我的test<br><br></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}`); 
          } 
        }) 
      Web({ src: '', controller: this.controller }) 
    } 
  } 
}

运行后font标签中的文本无法显示，请帮忙排查下是什么原因呢？

HarmonyOS

put_get

2024-11-07 10:45:49

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

参考代码如下：

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
@Entry 
@Component 
struct WebPage { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  htmlStr = `<html > 
  <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
  </head> 
  <br><br> 
  <b>ffffffff</b> 
  <i style="font-weight: bold;">aaaaaaa</i> 
  <p color="ef432c" size="4">bbbbbbbbbbb</p> 
  <font color="00ff00" size="4">ccccccccc</font> 
  <font color="0000ff" size="4">ddddddd<font size="4"> 
  <b>3333333</b><font size="4">fffff<b>eeeeeeee</b> 
  <font size="4">aaaaaaaa<b>fffffff<i>tttttttt<font size="4">nnnnnnnnnnnnnn</font> 
  </i></b></font>发自我的test</font> 
  </font></font><br><br></body> 
</html>` 
 
  // 
 
  build() { 
    Column() { 
      Button('loadData') 
        .onClick(() => { 
          try { 
            this.controller.loadData(this.htmlStr, "text/html", ''); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
      Web({ src: '', controller: this.controller }) 
    } 
  } 
}

因为#是特殊字符,需要转义特殊处理，请按照以下代码进行加载。

this.controller.loadData(this.htmlStr, "text/html", "UTF-8", " ", " ");

2024-11-07 17:19:16

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS WebView loaddata 无法完全展示html中的内容

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