How can I get the cordova InAppBrowser to provide a way for the user to close the browser when using an Android device?

Question

I'm using the cordova InAppBrowser to display content from an external site in my app. When I open the browser on an iPhone, there are some buttons at the bottom of the InAppBrowser for closing it or navigating back and forth. The InAppBrowser on an Android device has no such buttons and has no obvious way for the user to close the browser.

I know how to programmatically close the InAppBrowser, but how can the user close it when using an Android device?

I know the user can hit the hardware back button to close the browser, but (1) that's not intuitive - the back button typically means "go back a page", and (2) I'd eventually like to change the behavior of the back button to go back a page within the site that is displaying inside the InAppBrowser, rather than close the browser.

Timetable

Answer 1

Adding "location=yes" to the end of your call will place an address bar and DONE button at the top of the window on Android. (It appears at the bottom of the window in iOS). Clicking Done closes the window.

var ref = window.open('http://apache.org', '_blank', 'location=yes');

Morphine

I have to show the ugly address bar to get the Done button on Android? Man, that stinks... I kinda liked how it worked on the iOS device (no address bar, but still has a Done button). I suppose the InAppBrowser devs will get a little more consistency between the two and more options as the project matures a bit... I'll wait around a little longer to see if anyone else has any ideas. If not, I'll mark your answer as the accepted answer. Thanks for the input! – Timetable

Yeah, I haven't found a way to do it without having the address bar too. I agree it's pretty ugly. Happy to see if anyone brings any suggestions forward. I too am keen to ditch the address bar and just have a Done Button. – Morphine

I found a fairly-easy way to remove the address bar without removing the Done button. The instructions are in the answer I posted. I'll still mark this one as the "accepted answer", since it answers the original question. – Timetable

The DaveAlden post should be the right answer to this question – Intitule

this has changed as it no longer does that – Shulock

Answer 2

For those looking for a native "Done" button in the footer for Android (similar to iOS), I've implemented such a feature on this fork of cordova-plugin-inappbrowser.

Update: Jan 2018

My pull request has been merged into the official plugin repo, so you can wait for the next release (which will be >=2.0.2) or install direct from Github, e.g.:

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

Original answer

The implementation is an extension of PR #246 which is currently (4 December 2017) awaiting approval to merge. Once that's done, I'll open a separate issue and PR to merge this back into the master cordova-plugin-inappbrowser.

Here's some screenshots with the relevant options:

location=yes,footer=yes

location=no,footer=yes

location=yes,footer=yes,closebuttoncaption=Done

location=no,footer=yes,closebuttoncaption=Done,closebuttoncolor=#0000ff

location=no,footer=yes,footercolor=#0000ff,closebuttoncaption=Done

location=no,footer=yes,footercolor=#00ff00,closebuttoncaption=Done,closebuttoncolor=#0000ff

location=no,footer=yes,footercolor=#CC000000,closebuttoncaption=Done,closebuttoncolor=#00FFFF

Tweezers

Nice PR bro, i've used and is awesome! Thanks! – Middleaged

footer=yes is not showing. any idea? ios shows bottom but android not showing at bottom – Exteroceptor

The phonegap CLI 'create' command defaults to some fairly old plugins, it seems. Only when I deleted the default 'inappbrowser' plugin (it was version 1 something) and reinstalled, which gave me newest (3.0.0), then this worked. – Check

Wonderful answer! – Intitule

Answer 3

For those of us using Ionic (ionicframework.com) and/or ngcordova (ngcordova.com). The following code will launch the inappbrowser and then close the dialog via a link <a href="/mobile/close">close</a>.

  $cordovaInAppBrowser.open('http://localhost:3000/#/mypath/', '_blank', options).then((event) ->
    # success
    return
    ).catch (event) ->
      # error
      return

  $rootScope.$on '$cordovaInAppBrowser:loadstart', (e, event) ->
    $log.log 'loadstart', e, event
    if event.url.match('mobile/close')
      $cordovaInAppBrowser.close()

Rifle

Note that this answer assumes you have control over the page loaded in the frame (or that at least you know it contains a certain link somewhere). If you want to load arbitrary URL (and let the user navigate freely) and still give user the option to close the InAppBrowser, you probably need a button outside of the IAB. But if you control the page loaded, this is the easiest solution probably. The alternative is localstorage polling – Centroclinal

Answer 4

To keep the option 'location=yes' to behave the same on Android and iOS I would suggest to modify Troy's fix with the following change that moves the if statement to control the "toolbar.addView(edittext);" and not the entire toolbar.

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
}
toolbar.addView(close);

// Add our toolbar to our main view/layout
main.addView(toolbar);

Compared to the original code:

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
toolbar.addView(edittext);
toolbar.addView(close);

// Don't add the toolbar if its been disabled
if (getShowLocationBar()) {
    // Add our toolbar to our main view/layout
    main.addView(toolbar);
}

Coyote

Excellent. Exactly the thing I wanted, the way I wanted. – Gothard

Answer 5

As stated by elMarquis, you need to add "location=yes" in order to get the "Done" button on an Android device. However, if you'd like to get the Done button by itself, without the address bar, it's fairly easy to do by making one change to the cordova source code.

I got the information from this google group: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg

Here are some step-by-step instructions:

1. Download the cordova source code:

   git clone https://github.com/apache/cordova-plugin-inappbrowser

2. Download the commons codec lib from here

3. Open Android Developer Tools

4. Import the cordova project into your workspace

   File > Import... > Existing Projects into Workspace

5. Create a libs directory and copy the downloaded commons-codec-1.7.jar file into it.

6. Add a gen folder to the project (required by the .classpath file, but not included in the git download since git doesn't allow empty folders)
7. Go to Project > Build All. The project should build without errors.
8. Open InAppBrowser.java and search for "toolbar.addView(edittext);" (line 468 in the cordova version I downloaded).
9. Comment out that line.
10. Build the project again.
11. Copy the bin/cordova.jar file into whatever project you are using cordova in.

Hopefully that helps someone else.

Timetable

That's not easy at all... It would be nice if you could contribute your solution to apache source code... – Welty

Answer 6

As of 2016 April these answers are pretty outdated. I had to do this now so here is my experience.

Firstly, the Cordova/Ionic project got sliced into plugins. What we will need is the cordova-plugin-inAppBrowser repo.

STEP 1

First we have to clone it somewhere locally or fork it on github/bitbucket. (We will need our cloned repo permanently for every new project setup.) We can easily clone the repo with this command:

git clone [email protected]:apache/cordova-plugin-inappbrowser.git

STEP 2

Then we have to make the requested changes to the project. To make the url bar behaviour on Android to the same as in iOS we have to show the menubar always and show the url bar only if the user ask for the menubar. The code what controls this is in the /src/android/InAppBrowser.java file.

We have to change the lines between 707-716. (Note: these line numbers can change if they modify the file.)

We have to change the code from this

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
toolbar.addView(edittext);
toolbar.addView(close);

// Don't add the toolbar if its been disabled
if (getShowLocationBar()) {
    // Add our toolbar to our main view/layout
    main.addView(toolbar);
}

to this:

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
}
toolbar.addView(close);

main.addView(toolbar);

So what we did here is that we add the toolbars always with the exit/forward/back buttons and add the url bar only if the user want the full bar. This is the behaviour of the iOS version.

Moreover if we want to remove the forward/back buttons because Android has a native back button, then we have to comment them out and add them only if the use wants the full menu bar. So our code should looks like this:

// actionButtonContainer.addView(back);
// actionButtonContainer.addView(forward);

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
    // We add this here if the user want the full bar, then we need this buttons.
    actionButtonContainer.addView(back);
    actionButtonContainer.addView(forward);
}
toolbar.addView(close);

STEP 3

We have to add the modified plugin to our project, if you want this only one time then simply run

cordova plugin add https://github.com/username/cordova-plugin-inappbrowser.git
// or
cordova plugin add https://[email protected]/UserName/cordova-plugin-inappbrowser.git

instead of

cordova plugin add cordova-plugin-inappbrowser 

Note: You have to keep your modified repo because the cordova plugin add command fetch if from your repository every time you set up your project.

Layette

Answer 7

Just came across a solution that may help achieve your needs better, and/or help other people.

In summary, you can create a 'dummy' HTML page, add JavaScript in your App to detect when that page is loaded, and when it is loaded, close the InAppBrowser.

See here: Phonegap build - Open external page in InAppBrowser or childbrowser with no toolbar and close it?

Reverend

Answer 8

This is possible by tweaking the 'InAppBrowser.java'. I know this is little weird but this is the only choice I had. But, those little tweaks I made to the java file now allows me to navigate back within the pages in my app.

Here is the change to be made in InAppBrowser.java, In the 'run' method within showWebPage method, there will be a listener code something like this,

dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
                    public void onDismiss(DialogInterface dialog) {     
                        closeDialog();
                    }
});

Below that line add the below code,

dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {                   
@Override
     public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
         if (event.getAction()!=KeyEvent.ACTION_DOWN)
             return true;               
         if(keyCode==KeyEvent.KEYCODE_BACK){
             goBack();
             return true;
         }else {
             return false;
          }
      }
});

Retrenchment