Handle Android Back Button on Phonegap InAppBrowser

Question

I would like to disable or override the Android Back button while I am navigating pages on the InAppBrowser. Can I add an event listener that can handle that?

Answer 1

According to the documentation the behaviour of the hardware back button can be configured now for the InAppBrowser:

hardwareback: set to yes to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is yes, so you must set it to no if you want the back button to simply close the InAppBrowser.

Thanks to Kris Erickson.

So just update your InAppBrowser plugin if the backward navigation is the desired behaviour.

For more details see: https://github.com/apache/cordova-plugin-inappbrowser/pull/86

Answer 2

Running Cordova 5.1.1 and when i load pages in the inappbroswer i like having the back button work until the inappbrowser exits back to my index.html page because it's blank and just sits there. So i used the following code to fix this. It exits the app when it exits the inappbrowser.

window.open = cordova.InAppBrowser.open;                
            var ref = window.open(url, '_blank', 'location=no');
            ref.addEventListener('exit', function () {
                navigator.app.exitApp();
            });

Answer 3

Use jQuery mobile:

$(document).on('backbutton',
 function(e){
     e.preventDefault();
     // YOUR CODE GOES HERE
});

Answer 4

I was having this same issue and finally got it to work, I'll post the answer here in case it helps someone.

This is the code I use:

window.new_window = window.open(url, '_blank', 'location=no');

window.new_window.addEventListener("exit", function () {
    window.new_window.close();
});

So the key basically is to attach the exit event, which gets called when the back button of the device is tapped.

BTW, I used cordova.js, and build my apps locally using the Cordova CLI, I don't know if that makes any difference, I mention it just in case.

Answer 5

EDIT NOTE: As far as I know, it's not possible to override the back-button for the InAppBrowser in PhoneGap. But I did my best searching for possible solutions...

There's an eventListener to override back-button in PhoneGap -doesn't work for InAppBrowser-

function onDeviceReady(){
    document.addEventListener("backbutton", onBackKeyDown, false);
}

Alternative eventListener to override back-button -the OP said this didn't work either-

var ref = window.open('http://www.stackoverflow.com', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () {
    //logic here
})

Overriding the Back-button in an Activity -this is plain java, obviously didn't work in PhoneGap-

@Override
public void onBackPressed()
{
   //logic here
}

Conclusion:

Above solutions didn't work, following links (this answer, this one and a third one) didn't help either. So it's highly possible that overriding the back-button for the InAppBrowser in PhoneGap is not possible. If someone does come up with a solution or if things changed for a new PhoneGap version feel free to let us know...

EDIT:

Installing this plugin may take you to closest solution:

cordova plugin add org.apache.cordova.inappbrowse

What this plugin will do, in WP8, it will overlay back/forward/close button on InAppBrowser whenever you open any link/page in it.

See this image:

Answer 6

I know this question has an answer already but I post my answer for those who any of these answers didn't work for them(such as myself):

so I have a multi page app for android and IOS and I am using cordova 5.x and I added the code below in every page except the page I needed InAppBrowser:

delete window.open;

and then for the rest of the pages I used:

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(event) {
// your code for handling back button comes here
}

for handling back button

note that: delete window.open; base on the documentation

manually restore the default behaviour of 'window.open'

after that InAppBrowser plugin worked great and I handled back button in all pages correctly.

one last thing don't forget to add:<script type="text/javascript" charset="utf-8" src="cordova.js"></script> in pages you need to have InAppBrowser.

hope this help.