HarmonyOS Web组件加载片段时候不显示

使用Web组件时候，rawfile加载本地的HTML文件可以显示下面这个html文本，但是使用WebviewController.loadData加载就什么都显示不出来，我逐行排查发现去除<style>标签内的东西就可以显示了，但是样式不符合要求。想问下这种情况有什么好的建议没。

<html> 
<head> 
<style> 
a { 
  text-decoration: none; 
  color: #007aff; 
} 
</style> 
  </head> 
  <body> 
  <span 
  >欢迎使用xxx优鲜！<br />请您务必在使用xxx优鲜服务前，认真阅读xxx优鲜<a 
href="https://index.html" 
  >《用户协议》</a 
  >和<a href="https://index.html">《隐私政策》</a 
  >。<br />为便于您更直观了解我们如何保护您的个人信息，特向您说明如下：<br />1、为提供服务收集使用的个人信息：.....。您可以通过我们产品中提供的功能设置进行上述操作。</span 
  > 
  </body> 
  </html>

HarmonyOS

zxjiu

2024-11-07 11:47:49

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

loadData的HTML片段需要进行URI编码，例如：

// 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() { 
      Button('loadData') 
        .onClick(() => { 
          try { 
            // 点击按钮时，通过loadData，加载HTML格式的文本数据 
            this.controller.loadData(encodeURIComponent(`<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title> 
<style> 
</style> 
</head> 
<body> 
<h1 style="color: #e0e0e0">Hello World</h1> 
<h1 class="title">Hello World</h1> 
</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: 'www.huawei.com', controller: this.controller }) 
    } 
  } 
}

2024-11-07 14:51:32

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web组件加载片段时候不显示

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