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

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.