Question

Apple要求，没有文字滚动浏览透明状态栏。

我正在使用我的Phonegap 构建应用中的inAppBrowser插件，该应用遇到了这个问题。出于某种原因，inAppbrowser忽略了我为我的应用设置的背景，只显示状态栏对象后面的网站。

我正在使用StatusBarPlugin来控制我的状态栏使用Javascript：

document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;
    function iabLoadStart(event) {
        StatusBar.hide();
    }
    function iabLoadStop(event) {
    }
    function iabClose(event) {
         StatusBar.show();
         iabRef.removeEventListener('loadstart', iabLoadStart);
         iabRef.removeEventListener('loadstop', iabLoadStop);
         iabRef.removeEventListener('exit', iabClose);
    }    
    function openPage(url) {
    window.open(url, '_blank', 'location=yes,enableViewportScale=yes,');
    }
    // STATUS Bar
    function setStatusBar() {
    StatusBar.show();
    StatusBar.overlaysWebView(false);
    StatusBar.backgroundColorByHexString("#C8DB2F");
    }
    // Cordova is ready
    //
    function onDeviceReady() {
         checkConnection();
         setStatusBar();
         iabRef.addEventListener('loadstart', iabLoadStart);
         iabRef.addEventListener('loadstop', iabLoadStop);
         iabRef.addEventListener('exit', iabClose);
    }

我见过类似的问题here，但答案并没有解决我的问题。

Answer 1

是的，这是正确的。在iPhone上，inAppbrowser忽略了为应用程序本身所做的定义（Cordova 3.4 / IOS 7）。

此外，它会在返回应用程序时将其删除（在我的定义中，我将状态栏定义为透明并保持在应用程序正文之上）。

Answer 2

我找到了解决此问题的方法：编辑CDVInAppBrowser.m文件并在此块中：

if (self = [super init]) {
    // default values
    self.location = YES;
    self.toolbar = YES;
    self.closebuttoncaption = nil;
    self.toolbarposition = kInAppBrowserToolbarBarPositionBottom;

将底部更改为顶部:-) 还有其他事情可以做，但这会以一种简单的方式解决问题。

Answer 3

当您打开InAppBrowser时，您的应用程序及其所有JS都会暂停，因此，无论您尝试在应用程序中添加多少脚本来控制IAB，一旦它出现问题就不会有任何问题。实际上是开放的。

但是，如果将工具栏位置选项设置为顶部，则会将浏览器控件从屏幕底部移至顶部。浏览器镶边将考虑状态栏，当您向上滚动内容时，它将被充分隐藏在控件下方。

这是一种hacky解决方案，但无需强烈编码或重写插件即可运行。

怎么做：

在config.xml文件中，确保您正在指定InAppBrowser插件：

<gap:plugin name="org.apache.cordova.core.inappbrowser" />

然后，无论您打开浏览器的哪个位置：

window.open('YOUR-URL-HERE', '_blank', 'toolbarposition=top');

您可以在InAppBrowser GitHub readme中找到更多可自定义的选项。

Answer 4

我使用的是cordova-plugin-inappbrowser，并且与iOS中的状态栏存在完全相同的问题。我在这里尝试了一些建议，并试图插入CSS（）来调整顶部的边距，似乎没有任何工作。最后，安装org.apache.cordova.statusbar插件并简单地调用StatusBar.overlaysWebView(false);更正了问题。

您可以阅读有关statusbar plugin here的更多信息。解决方案由neilsteventon提供。

Answer 5

要进一步扩展@alexkb，解决方案是挂钩InAppBrowser的exit事件，以便在返回页面后statusBar将正确显示。

myinapp = window.open('YOUR-URL-HERE', '_blank', 'toolbarposition=top');
myinapp.addEventListener('exit', function (event) {
    StatusBar.overlaysWebView(true);
    StatusBar.overlaysWebView(false);
});

Answer 6

这解决了我隐藏的问题，并在应用内浏览器关闭时显示状态栏

var ref = window.open('http://google.com', '_blank');
ref.addEventListener('exit', function(event) {
    StatusBar.hide();
    StatusBar.show();
});

iOS7状态栏和inappbrowser（Phonegap Build）

6 个答案: