HarmonyOS 鸿蒙Next webview 全屏后 css 无法获取safearea高度

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

HarmonyOS 鸿蒙Next webview 全屏后 css 无法获取safearea高度

App 启动时候，设置Webview全屏

 onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, ‘testTag’, ‘%{public}s’, ‘Ability onWindowStageCreate’);


// 初始化全局ImageKnife
ImageKnife.with(this.context);


windowStage.loadContent(‘pages/MainPage’, (err) => {
if (err.code) {
hilog.error(0x0000, ‘testTag’, ‘Failed to load the content. Cause: %{public}s’, JSON.stringify(err) ?? ‘’);
return;
}
hilog.info(0x0000, ‘testTag’, ‘Succeeded in loading the content.’);


// 1. 设置窗口全屏, 为了给 webview
// let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// let isLayoutFullScreen = true;
// windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
});


}

问题 Webview 前端同学内部 **获取 css safeare高度 safe-area-inset-top 为0，实际应该是有值的。前端想通过css获取statusbar，navigationbar 正确的高度

Harmonyos Next教程
2 回复
在全屏模式下，窗口和状态栏存在重叠，可通过window的AvoidAreaType 获取状态栏和窗口重叠区域的属性。
let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
// ...

// 2. 获取布局避让遮挡的区域
let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = windowClass.getWindowAvoidArea(type);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
可以参考此文档 开发应用沉浸式效果-开发布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

针对HarmonyOS 鸿蒙Next webview全屏后CSS无法获取safearea高度的问题，以下是一些可能的解决方案：

  1. 确保页面加载完成：在获取safearea高度之前，必须确保webview中的页面内容已经完全加载。可以通过监听window.onload或document.DOMContentLoaded事件来实现。
  2. 使用官方API：鸿蒙系统提供了获取安全区域高度的API，如getWindowAvoidArea，可以在webview的页面中使用JavaScript调用这些API来获取安全区域的高度。
  3. 检查CSS样式：确保webview中的页面CSS样式没有设置固定的高度或宽度，因为这可能会影响到安全区域高度的获取。
  4. 检查父容器：如果webview的父容器有设置影响布局的属性，如固定高度、clip等，可能会影响到安全区域高度的计算。

如果以上方法都无法解决问题，可能是由于鸿蒙系统的webview组件在特定版本或配置下存在bug或限制。此时，建议联系鸿蒙系统的官方客服或技术支持以获取更专业的帮助。官网客服地址是：https://www.itying.com/category-93-b0.html

回到顶部