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

StackOverflow https://stackoverflow.com/questions/15348871

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.

Was it helpful?

Solution 3

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

OTHER TIPS

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

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

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

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.

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.

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?

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;
          }
      }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top