如何让Android端Cordova InAppBrowser覆盖状态栏实现全屏体验

一、Config.xml 关键配置调整 #

在<platform name="android">节点下添加以下配置，确保应用主题和InAppBrowser偏好设置正确：

• 应用全屏主题（覆盖状态栏）：

<!-- 适配旧版Android的全屏主题 -->
<preference name="android-theme" value="@android:style/Theme.NoTitleBar.Fullscreen" />
<!-- 若适配Android 5.0+，可使用Material风格全屏主题 -->
<!-- <preference name="android-theme" value="@android:style/Theme.Material.Light.NoActionBar.Fullscreen" /> -->

• InAppBrowser全局偏好：

<preference name="InAppBrowserHideUrlBar" value="yes" />
<preference name="InAppBrowserStatusBarStyle" value="hidden" />

二、代码层精准控制 #

启动InAppBrowser时，配合StatusBar插件确保状态栏彻底隐藏，并设置正确的窗口参数：

// 先隐藏系统状态栏
StatusBar.hide();
// 延迟执行避免状态竞态（可选，视情况调整时长）
setTimeout(() => {
    // 启动InAppBrowser，启用全屏参数
    const browser = cordova.InAppBrowser.open(
        'https://你的目标网址.com',
        '_blank',
        {
            fullscreen: 'yes',
            presentationstyle: 'fullscreen',
            toolbar: 'no', // 不需要工具栏则关闭
            hidespinner: 'yes',
            statusbar: 'hidden'
        }
    );

    // 页面加载完成后再次确认状态栏隐藏（防止页面触发状态栏显示）
    browser.addEventListener('loadstop', () => {
        StatusBar.hide();
        // Android 11+ 额外设置：禁止状态栏覆盖WebView
        if (cordova.platformId === 'android') {
            cordova.exec(null, null, 'StatusBar', 'overlaysWebView', [false]);
        }
    });
}, 200);

三、常见问题排查 #

• 检查platforms/android/app/src/main/AndroidManifest.xml，确认MainActivity的android:theme已正确应用全屏主题
• 若使用启动屏插件，需确保启动屏关闭后不会自动恢复状态栏显示
• Android 12+ 需将android-targetSdkVersion设置为31+，在config.xml中添加：

<preference name="android-targetSdkVersion" value="33" />

内容的提问来源于stack exchange，提问作者Aniketh keshava