HarmonyOS 鸿蒙Next：关于Web组件加载本地资源后color属性使用hex值导致网页内容无法加载的问题

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

HarmonyOS 鸿蒙Next：关于Web组件加载本地资源后color属性使用hex值导致网页内容无法加载的问题

这种是正常的

@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html>" +
                "<head><style>body { color: red; }</style></head>" +
                "<body>Source:<pre>source</pre></body>" +
                "</html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

下面这个是不正常的

@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html>" +
                "<head><style>body { color: #F00; }</style></head>" +
                "<body>Source:<pre>source</pre></body>" +
                "</html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

这里面仅修改了 color: red 为 color: #F00 ,然后网页内容就加载不出来了 我的环境是 MacOS上的模拟器运行的，因为没有真机，我不太清楚真机上运行的情况


更多关于HarmonyOS 鸿蒙Next：关于Web组件加载本地资源后color属性使用hex值导致网页内容无法加载的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next：关于Web组件加载本地资源后color属性使用hex值导致网页内容无法加载的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next系统中Web组件加载本地资源后，使用hex值设置color属性导致网页内容无法加载的问题，这通常是由于系统或组件对CSS解析的特定限制或错误处理导致的。

在HarmonyOS的Web组件环境中，可能存在对CSS hex颜色值解析的兼容性问题。解决此类问题的一种方法是尝试使用其他颜色表示方法，如RGB或RGBA，或者检查是否有特定的样式或脚本与hex颜色值冲突。

此外，确保本地资源路径正确无误，并且Web组件具有足够的权限访问这些资源。有时，路径错误或权限问题也可能导致资源加载失败，间接影响网页内容的显示。

如果问题持续存在，建议检查HarmonyOS的官方文档或更新日志，查看是否有关于此问题的已知问题或修复。同时，确认Web组件的版本是否与HarmonyOS系统版本兼容。

如果上述方法均未能解决问题，请联系HarmonyOS的官方客服以获取更专业的技术支持。官网客服地址是：https://www.itying.com/category-93-b0.html 如果问题依旧没法解决请联系官网客服。

回到顶部