HarmonyOS 鸿蒙Next Web 加载html标签代码，样式不生效

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web 加载html标签代码，样式不生效

使用loadData加载下面html代码不显示，去掉style="color:#4C33E5;"正常显示，为什么

<html><body bgcolor=“white”>Source:<span style=“color:#4C33E5;”>2024年11月12日-17日</span></body></html>


更多关于HarmonyOS 鸿蒙Next Web 加载html标签代码，样式不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复
如果html中存在非法字符 例如 css 中的 color：#4C33E5有“#”的时候会加载不了，需要使用文档中提供的加载本地资源的方法，后面两个参数要复制空格 “ ”，“ ”。代码如下：

```

            this.controller.loadData(

              "<html><body bgcolor=\"white\">Source:<span style=\"color:#4C33E5;\">2024年10月1日-7日</span></body></html>

 "text/html",

              "UTF-8",

              //后两个参数设置空格

              " ",

              " "

            );

```

在该接口最下面的说明中有描述：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#loaddata

更多关于HarmonyOS 鸿蒙Next Web 加载html标签代码，样式不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你的html代码里包含井号字符#，所以显示有问题，做一下转义或者base64编码就可以了，参考：

鸿蒙网络编程系列20-解决web组件加载网页白屏示例

在HarmonyOS鸿蒙Next Web环境中加载HTML标签时，如果样式不生效，可能是由以下几个常见原因引起的：

  1. CSS文件未正确加载：确保CSS文件的路径正确，且服务器配置允许访问这些资源。检查<link>标签中的href属性是否正确指向CSS文件。

  2. CSS选择器优先级问题：样式可能被其他CSS规则覆盖。检查是否有更具体的选择器或使用了!important声明影响了样式应用。

  3. 缓存问题：浏览器或应用缓存可能导致加载的是旧的CSS文件。尝试清除缓存或使用无痕/隐私模式重新加载页面。

  4. 浏览器兼容性：HarmonyOS的Web引擎可能对某些CSS特性支持不完全。查阅HarmonyOS官方文档，确认CSS特性的兼容性。

  5. CSS语法错误：检查CSS文件是否存在语法错误，如缺少分号、花括号不匹配等。

  6. 资源加载顺序：确保CSS文件在HTML中的加载顺序合理，避免样式被后续加载的样式覆盖。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。在那里，你可以获得更专业的技术支持和解决方案。

回到顶部