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

You can do it quite easily now (as of InAppBrowser version 0.3.3), but you will have to edit the Java files. Go to src/com/org/apache/corodova/inappbrowser directory and edit the InAppBrowserDialog.java:

Change

 public void onBackPressed () {
    if (this.inAppBrowser == null) {
        this.dismiss();
    } else {
        // better to go through the in inAppBrowser
        // because it does a clean up            
        this.inAppBrowser.closeDialog();           
    }
}

to

public void onBackPressed () {
    if (this.inAppBrowser == null) {
        this.dismiss();
    } else {
        if (this.inAppBrowser.canGoBack()) {
            this.inAppBrowser.goBack();
        }  else {
            this.inAppBrowser.closeDialog();
        }
    }
}

Then go to InAppBrowser and find the goBack function, change:

/**
 * Checks to see if it is possible to go back one page in history, then does so.
 */
private void goBack() {
    if (this.inAppWebView.canGoBack()) {
        this.inAppWebView.goBack();
    }
}

to

/**
 * Checks to see if it is possible to go back one page in history, then does so.
 */
public void goBack() {
    if (this.inAppWebView.canGoBack()) {
        this.inAppWebView.goBack();
    }
}

public boolean canGoBack() {
    return this.inAppWebView.canGoBack();
}

And now the hardware back button will go back until there are no more backs to do. I really think this should be the default behavior in android since the Done button already closes the InAppBrowser window.

Answer 2

This worked for me in PhoneGap 2.7, help came from here, How do I disable Android Back button on one page and change to exit button on every other page

document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("backbutton", function (e) {
            e.preventDefault();
        }, false );
}

Answer 3

As far as I know it's not possible to override or detect the back button from inAppBrowser. When you press the back button, inAppBrowser will hide and return control to the Phonegap page. You can catch this with the focus event on the window, (using jQuery) like

var browser = window.open('http://example.com', '_blank', 'location=no');
$(window).on('focus', function() {
    browser.show();
});

to reopen the browser. You could then use browser.executeScript() to signal the webapp loaded in the browser, if you like.

Inspired by this forum post.