Cordova InAppBrowser 安卓全屏覆盖状态栏(60字内)

2024-12-20 14:10:52

Cordova InAppBrowser 在 Android 实现真正全屏覆盖状态栏

在基于 Cordova 的 Android 应用程序开发中，有时需要使用 InAppBrowser 插件来加载和显示网页内容。理想情况下，会期望 InAppBrowser 以全屏模式呈现，即完全覆盖包括状态栏在内的整个屏幕区域，为用户提供更沉浸式的体验。但是在实践中可能会发现 InAppBrowser 并未如预期覆盖状态栏。针对此类情况，可以通过调整 InAppBrowser 的设置和 Cordova 项目的配置来实现理想效果。

一、现象解析

开发者配置 Cordova 项目并在应用内通过 Statusbar.hide(); 隐藏了状态栏后，再启动 InAppBrowser，期望能让这个网页全屏展示，却往往遇到一个令人困惑的现象：页面没有延伸到屏幕顶端，状态栏区域留空或显示为黑条。

本质上讲，这个问题是因为 InAppBrowser 是一个独立于 Cordova Webview 的新窗口。即便对 Cordova 自身做了全屏设置，默认情况下，InAppBrowser 不会自动继承这些设置。进而导致无法达成期望的效果。因此，需要额外的配置来实现 InAppBrowser 真正覆盖全屏的需求。

二、解决方案

实现 InAppBrowser 覆盖状态栏的真全屏，几种方式都值得一试。不同的方案可能对兼容性的要求略有区别。实践操作是决定最优解的不二法则。

1. 修改 `config.xml` 文件参数并使用特定 InAppBrowser 选项

一种有效的途径是同时配置 config.xml 文件中的全屏模式设置以及特定 InAppBrowser 选项。这样，网页能够获得最大的显示区域。

操作步骤：

打开 Cordova 项目的 config.xml 文件。
确认或添加以下首选项（preference）：

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="Fullscreen" value="true" />

参数详解：
StatusBarOverlaysWebView 设置为 false 意味着让状态栏有一个独立存在的空间。若此选项为 true 则允许内容绘制在状态栏下层。这种设置在此处不能达到理想效果。 StatusBarBackgroundColor 控制状态栏背景色，应为一种固定的暗色调（这里选用了纯黑色）。若设置为透明色，可能无法保证在所有机型上都有预期的遮蔽状态栏行为。 StatusBarStyle 建议为 lightcontent。该属性指定了状态栏文字及图标的色彩。设为 lightcontent 则让其在深色背景上显示为白色，保证可见性。
Fullscreen 为 true，强制应用程序以全屏模式启动，这是实现完全沉浸式体验的关键一环。

在 JavaScript 代码中使用 InAppBrowser 的 show() 方法展示，并正确设置 location=no 、hide,hidden=yes，最后务必确认添加上 beforeload=yes。

const target = '_blank';
const options = 'location=no,beforeload=yes,hidden=yes';
const inAppBrowserRef = cordova.InAppBrowser.open('https://example.com', target, options);
inAppBrowserRef.addEventListener('loadstop', function () {
    inAppBrowserRef.show();
    navigator.splashscreen.hide();
});

beforeload=yes 参数是为了拦截在 InAppBrowser 内部发生的新页面加载。 hidden=yes 表示一开始将InAppBrowser隐藏起来，通过 loadstop 加载结束，再用.show()使其显示出来，实现预加载效果。 location=no 则隐藏地址栏，确保网页视图呈现最大化。

部署后重新进行测试。如果上述办法仍旧没有改善显示效果，那么下面这招能解决大问题。

2. 搭配 "beforeload" 事件运用特定 Javascript 代码微调界面布局

直接执行特定的 JavaScirpt 代码可以灵活调整布局。这种技巧能处理部分疑难杂症。

操作步骤：

在 config.xml 里保证第一种方法配置完毕。
在js文件里创建 inAppBrowserRef 对象时使用beforeload，同时隐藏状态栏和Splashscreen：

    var inAppBrowserRef = cordova.InAppBrowser.open(url, '_blank', 'location=no,beforeload=yes,hardwareback=yes');
    // 在每次 InAppBrowser 加载新 URL 前隐藏状态栏。
        inAppBrowserRef.addEventListener('beforeload', function (params, callback) {
          // 仅针对Android平台进行操作。
          if (cordova.platformId == 'android') {
                StatusBar.hide();
           }
          //继续执行正常的页面加载。
          callback(params.url);
      });
    
      inAppBrowserRef.addEventListener('loadstop', function (event) {
            StatusBar.hide();
          // 执行一段用于隐藏原生系统导航栏的 JS 脚本。
        inAppBrowserRef.executeScript(
              {
                code: "\
                      var meta = document.createElement('meta'); \
                      meta.name = 'viewport'; \
                      meta.content = 'width=device-width, initial-scale=1, user-scalable=no,viewport-fit=cover'; \
                      document.getElementsByTagName('head')[0].appendChild(meta); \
                      "
                    
              },
            );
           navigator.splashscreen.hide(); // 隐藏启动画面。
        });
      // 当 InAppBrowser 退出时，重新显示状态栏。
      inAppBrowserRef.addEventListener('exit', function (event) {
            StatusBar.show();
       });

安全建议： 对执行的代码做一些防御式编程处理，包括 try-catch 块的包裹等等。并且要注意不同手机的不同设置，可能需要在测试阶段验证各种系统参数。

代码解释:

通过监听 beforeload 事件，能够在加载新 URL 之前，保证 StatusBar 被隐藏。并且在每次网页加载完毕以后执行了一些调整页面样式及视图布局的 JavaScript 代码。 executeScript 用于调整网页视口（viewport），以便网页更好地适应屏幕布局。当InAppBrowser关闭时，触发 exit 事件，将 StatusBar 恢复显示。

更新应用程序。在测试真机中打开 InAppBrowser，状态栏位置正常情况下会显示为黑色或暗色背景的样式。并且，网页将会在状态栏的下方正常进行展示。这样就达到了理想中的全屏效果。

请记住，cordova-plugin-inappbrowser 插件版本需要在 5.0.0 以上。 cordova-plugin-statusbar 和 cordova-plugin-splashscreen 的支持在上述操作中也不可或缺。在项目的 package.json 文件里可以指定插件的最新版本信息。确保自己使用的版本，大于官方的兼容需求。例如可以写为如下结构。

{
    ...省略...

    "dependencies": {
        ...省略...

        "cordova-plugin-inappbrowser": "^5.0.0",
        "cordova-plugin-statusbar": "^3.0.0",
        "cordova-plugin-splashscreen": "^6.0.2"

        ...省略...
    }
    ...省略...
}

更新并安装所有相关的插件。通过执行 cordova plugin add 命令实现。例如运行以下命令。

cordova plugin add cordova-plugin-inappbrowser@5.0.0
cordova plugin add cordova-plugin-statusbar@3.0.0
cordova plugin add cordova-plugin-splashscreen@6.0.2