iOS7状态栏和inappbrowser（Phonegap Build）

Posted 2023-04-18

【中文标题】iOS7状态栏和inappbrowser（Phonegap Build）

【英文标题】：iOS7 status bar and inappbrowser (Phonegap Build)

【发布时间】：2014-03-07 03:11:25

【问题描述】：

Apple 要求，在其透明状态栏中没有任何文本滚动。

我在我的 Phonegap Build 应用程序中使用了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提出了类似的问题，但答案并没有解决我的问题。

【参考方案1】：

是的，没错。在 iPhone 上，inAppbrowser 会忽略应用程序本身的定义（Cordova 3.4 / ios 7）。

此外，当它返回应用程序时，它会删除它（在我的定义中，我将状态栏定义为透明并保持在应用程序主体的顶部）。

【讨论】：

有没有办法在它返回应用程序时不擦除它？

找到答案。将“基于视图控制器的状态栏外观”设置为“是”将使状态文本在返回到应用程序时重新出现。

您的回答有效，谢谢。但仍然存在 inAppbrowser 不尊重应用状态栏定义的问题。我会尝试扭转局面，如果可行，我会在这里发布。

【参考方案2】：

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

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

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

【讨论】：

看起来这只是 iOS

【参考方案3】：

当您打开 InAppBrowser 时，您的应用程序及其所有 JS 都会暂停，因此无论您尝试在应用程序中添加多少脚本来控制 IAB，一旦它实际打开，这一切都无关紧要。

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

这是一种 hacky 解决方案，但无需大量编码或重新编写插件即可工作。

怎么做：

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

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

然后无论你在哪里打开浏览器：

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

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

【讨论】：

这在ios上不起作用，仍然看到状态栏

【参考方案4】：

我正在使用 cordova-plugin-inappbrowser 并且在 iOS 中的状态栏上遇到了完全相同的问题。我在这里尝试了一些建议，并尝试使用 insertCSS() 来调整顶部的边距，但似乎都没有效果。最后，安装 org.apache.cordova.statusbar 插件并简单地调用StatusBar.overlaysWebView(false); 解决了这个问题。

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

【讨论】：

你在哪里称呼它？看起来它不会影响 IAB。

【参考方案5】：

为了进一步扩展@alexkb，解决方案是钩入InAppBrowser的退出事件，这样当你返回页面后statusBar会正确显示。

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

【参考方案6】：

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

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