HarmonyOS Web动态加载html片段,带有#会显示空白问题

<div><span style=\"color: #666666;\">测试测试测试测试测试测试</span></div> 
  --------加载空白 
<html><body><div style='color: rgb(100,100,255)'>测试测试测试测试测试</div></body></html> 
  --------加载成功

在多种场景下,无法避免#号。

HarmonyOS
2024-09-05 10:13:10
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

若html中的富文本中带有注入#等特殊字符,建议使用带有两个空格的loadData函数,将baseUrl和historyUrl置为空。

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#loaddata

demo如下:

// 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}`); 
          } 
        }) 
      // 组件创建时,加载www.huawei.com 
      Web({ src: 'www.huawei.com', controller: this.controller }) 
    } 
    .width("100%").height("100%").justifyContent(FlexAlign.Center) 
  } 
}
分享
微博
QQ
微信
回复
2024-09-05 18:38:21
相关问题
HarmonyOS Web组件加载片段时候不显示
139浏览 • 1回复 待解决
使用Web组件加载网页,显示空白
375浏览 • 1回复 待解决
HarmonyOS Web组件加载html文件异常
396浏览 • 1回复 待解决
HarmonyOS html富文本显示问题
735浏览 • 1回复 待解决
HarmonyOS webview加载本地html问题
222浏览 • 1回复 待解决
web组件对html文件的加载
709浏览 • 1回复 待解决
HarmonyOS Web组件如何加载html字符串
467浏览 • 1回复 待解决
HarmonyOS web加载页面图片不显示
347浏览 • 1回复 待解决
预览器上WEB组件无法显示HTML内容
2416浏览 • 1回复 待解决
HarmonyOS web组件加载pdf问题
474浏览 • 1回复 待解决
Web如何使用loadData加载复杂Html字符串
2145浏览 • 1回复 待解决