uni-app安卓app端web-view引入的同为uniapp开发的h5页面的navbar获取不到状态栏的高度，iOS可以

uni-app安卓app端web-view引入的同为uniapp开发的h5页面的navbar获取不到状态栏的高度，iOS可以

开发环境 版本号 项目创建方式
Mac sequoia 15.5 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Mac
手机系统：Android
手机系统版本号：Android 13
手机厂商：小米
手机机型：红米note 13
页面类型：vue
vue版本：vue3
打包方式：云端
项目创建方式：HBuilderX

示例代码：

<template>  
    <view class="">  
        <web-view  
            id="web-view"  
            ref="webview"  
            :src="orderUrl"  
            @message="handleMessage"  
        ></web-view>  
    </view>  
</template>  

<script>  
export default {  
    name: 'applyToJoin',  
    data() {  
        return {  
            orderUrl: 'https://hellouniapp.dcloud.net.cn/pages/tabBar/extUI/extUI'  
        };  
    },  
    onLoad() {  
        const userInfo = uni.getStorageSync('userInfo');  
    },  
    methods: {  
        handleMessage(e) {  
            if (e && e.detail && e.detail.data) {  
                const data = e.detail.data[0];  
                if (data.action === 'goBack') {  
                    uni.navigateBack();  
                }  
            }  
        }  
    },  
    onUnload() {}  
};  
</script>

更多关于uni-app安卓app端web-view引入的同为uniapp开发的h5页面的navbar获取不到状态栏的高度，iOS可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

看你代码中也没有获取高度的逻辑，你写在哪里呢？

更多关于uni-app安卓app端web-view引入的同为uniapp开发的h5页面的navbar获取不到状态栏的高度，iOS可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我认为pages.json导航栏不需要再去特殊处理吧,不是会自动去获取状态栏的高度吗？为什么还要去获取高度？我给的demo是可以验证到我说的这种问题，在web-view引用的h5页面，具体状态栏高度获取用uni.getSystemInfoSync().statusBarHeight 和 plus.navigator.getStatusbarHeight() 对比就行，安卓的手机用plus.可以获取到，uni.的获取不到状态栏高度，但是iOS是可以的。

回复 6***@qq.com: 等我看一下这个问题的

这是一个常见的Android与iOS平台差异问题。在uni-app中，web-view组件在Android和iOS上的实现机制不同，导致状态栏高度获取不一致。

问题原因：

  • iOS的web-view与原生页面共享相同的渲染环境，能够正确获取状态栏信息
  • Android的web-view是一个独立的浏览器内核，与原生环境隔离，无法直接访问uni-app的原生API

解决方案：

  1. 通过postMessage传递状态栏高度 在宿主页面获取状态栏高度后传递给H5页面：
onLoad() {
    // 获取状态栏高度
    const { statusBarHeight } = uni.getSystemInfoSync();
    
    // 延迟确保web-view加载完成
    setTimeout(() => {
        const webview = this.$refs.webview;
        if (webview) {
            webview.evalJs(`window.postMessage({
                type: 'statusBarHeight',
                height: ${statusBarHeight}
            }, '*')`);
        }
    }, 500);
}
  1. H5页面接收数据 在H5页面的mounted或onLoad中：
// H5页面代码
mounted() {
    window.addEventListener('message', (event) => {
        if (event.data && event.data.type === 'statusBarHeight') {
            this.statusBarHeight = event.data.height;
            // 更新navbar样式
        }
    });
    
    // 主动请求数据
    if (window.parent !== window) {
        window.parent.postMessage({ action: 'getStatusBarHeight' }, '*');
    }
}
  1. 宿主页面监听请求 在handleMessage中添加：
handleMessage(e) {
    const data = e.detail.data[0];
    if (data.action === 'getStatusBarHeight') {
        const { statusBarHeight } = uni.getSystemInfoSync();
        this.$refs.webview.evalJs(`window.postMessage({
            type: 'statusBarHeight', 
            height: ${statusBarHeight}
        }, '*')`);
    }
}
回到顶部