HarmonyOS鸿蒙Next中Web组件加载本地html页面空白

HarmonyOS鸿蒙Next中Web组件加载本地html页面空白

html页面代码是官方demo，仅有hello world。真机运行页面显示空白。

截取了部分真机运行错误日志

是通过路由跳转到web组件页面，最底部有真机截图，空白。

[(100000:100000:scope)] can't find target destination by index, create empty node

06-18 10:44:40.852   2754-3246     C04207/com.oho...oard/WMSFocus  com.ohos.sceneboard   E     [] GetFocusSessionElement(9603): permission denied!

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

  build() {
    Column() {
      Web({ src: $rawfile("form.html"), controller: this.controller })
    }
  }
}

<!DOCTYPE html>
<html>
<body>
    <div style="color:red;font-size: 200px;">Hello World</div>
</body>
</html>

真机截图


更多关于HarmonyOS鸿蒙Next中Web组件加载本地html页面空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

默认字体太小。 ‘Hello World’ 显示在了左上角，仔细看

更多关于HarmonyOS鸿蒙Next中Web组件加载本地html页面空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，我仔细看了。甚至p标签加了样式
<p style="color:red;font-size: 200px;">Hello World</p>
仍然看不到，

  1. form.html 位置没放对？
  2. 如果是新增的路由Navigation，记得先 Rebuild Project.
  3. 使用 ArkUI Inspector 看看UI，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

十分感谢，解决了，

鸿蒙Next中Web组件加载本地html页面空白通常由以下原因导致：

  1. 文件路径问题：确保html文件放在resources/rawfile目录下，使用$rawfile()引用时路径正确
  2. 权限缺失：需在config.json中配置ohos.permission.INTERNET权限
  3. 加载方式错误：应使用loadUrl而非load，正确格式为webController.loadUrl("$rawfile(test.html)")
  4. CSP限制：检查html文件中是否包含过严的Content-Security-Policy
  5. 编码问题：确认html文件是UTF-8编码，

从错误日志和代码来看，Web组件加载本地html页面空白可能有以下几个原因：

  1. 权限问题：日志中显示"permission denied"，可能是缺少必要的权限。在config.json中需要添加ohos.permission.INTERNET权限。

  2. 文件路径问题：确保form.html文件放在resources/rawfile目录下，并且文件名大小写完全匹配。

  3. Web组件初始化问题：可以尝试在aboutToAppear生命周期中初始化WebviewController：

aboutToAppear() {
  this.controller = new webview.WebviewController();
}
  1. 样式问题：虽然不太可能，但可以尝试给Web组件设置固定宽高：
Web({ src: $rawfile("form.html"), controller: this.controller })
  .width('100%')
  .height('100%')

建议检查以上几点，特别是权限和文件路径问题，这是最常见的导致空白页面的原因。

回到顶部