iOS7 status bar and inappbrowser (Phonegap Build)

Question

Apple requires, that no text scrolls through their transparent status bar.

I am using the inAppBrowser Plugin in my Phonegap Build app, which runs into exactly this problem. For some reason, the inAppbrowser ignores the background I set for my App, and just shows the website behind the status bar objects.

I am using the StatusBarPlugin to control my Status Bar 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);
    }

I have seen similar questions coming up here, but the answers didn't solve my problem.

score 2 · Answer 1 · answered Mar 10 '14 at 11:29

2

Yes, that's correct. On iPhone the inAppbrowser ignores the definitions made for the app itself (Cordova 3.4 / IOS 7).

Furthermore, it erases it when it returns to the app (in my definitions I defined the status bar to be transparent and stay on top of the application body).

answered Mar 10 '14 at 11:29

Miguel Lopes

41
1

Are there anyway to not erase it when it returns to the app? – hllau Mar 12 '14 at 07:18
Answer found. Setting "View controller-based status bar appearance" to "Yes" would make the status text reappear when it returns to the app. – hllau Mar 12 '14 at 07:25
2

Your answer works, thanks. But still remains the problem of inAppbrowser not respecting the app statusbar definitions. I'll try a turnaround and if it works, I'll post here. – Miguel Lopes Mar 13 '14 at 10:44

score 2 · Answer 2 · answered Apr 01 '14 at 13:14

2

I found a way to solve this problem: you edit the CDVInAppBrowser.m file and in this block:

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

change the Bottom to Top :-) There are other things that can be done but this kills the problem in a simple way.

answered Apr 01 '14 at 13:14

Miguel Lopes

41
1

Looks like this is iOS only – mu3 Aug 31 '16 at 15:02

Little Tiny Fish · Answer 3 · 2014-07-03T17:03:48.193

When you open the InAppBrowser, your app and all of it's JS are paused, so no matter how much scripting you try to put in your app to control the IAB none of it will matter once it's actually open.

However, if you set the tool bar position option to top, it will move the browser controls from the bottom of the screen to the top. The browser chrome will account for the status bar and when you scroll content up, it will be sufficiently hidden underneath the controls.

It's kind of a hacky solution, but it works without intense coding or re-writing the plugin.

How to do it:

In your config.xml file, make sure you're specifying the InAppBrowser plugin:

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

Then wherever you are opening the browser:

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

You can find more customizable options in the InAppBrowser GitHub readme.

This does not work on ios, still seeing the status bar – eyal_katz Oct 12 '16 at 06:50 — eyal_katz, Oct 12 '16 at 06:50

alexkb · Answer 4 · 2015-01-14T05:01:12.283

0

I'm using cordova-plugin-inappbrowser and had these exact same issues with the statusbar in iOS. I tried a few of the suggestions here, as well as trying to insertCSS() to adjust the margin at the top and none seemed to work. In the end, installing the org.apache.cordova.statusbar plugin and simply calling StatusBar.overlaysWebView(false); corrected the issue.

You can read more about the statusbar plugin here. Solution courtesy of neilsteventon.

edited Jan 14 '15 at 05:01

answered Jan 14 '15 at 04:07

alexkb

3,216
2
30
30

Where do you call it? Looks like it doesn't affect the IAB. – mu3 Aug 30 '16 at 17:58

score 0 · Answer 5 · answered Jan 15 '17 at 06:11

To further expand on @alexkb, the solution is to hook into the exit event of the InAppBrowser so that after you return to the page the statusBar will show correctly.

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

score 0 · Answer 6 · answered Jan 19 '17 at 13:40

0

This fixed the issue for me hide and show the statusbar when the in app browser is closed

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

answered Jan 19 '17 at 13:40

Scott w

495
7
15

iOS7 status bar and inappbrowser (Phonegap Build)

6 Answers6