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 InA

Answer 1

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()

Answer 2

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 git@github.com: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://UserName@bitbucket.org/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.

Answer 3

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);
}

Answer 4

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.

Answer 5

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

Answer 6

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;
          }
      }
});