Override Android Backbutton Behavior Only Works on the First Page with Phonegap

Override Android Backbutton behavior only works on the first page with PhoneGap

I gone through the new Phonegap source code and did following changes to make the backbutton work.

Html test code

<script type="text/javascript">
    $("#home").click(function(){
        $.mobile.changePage("home.html");
    });

    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("backbutton", handleBackButton, false);

    function onDeviceReady() {
        console.log("PhoneGap Ready!");
    }

    function handleBackButton() {
        console.log("Back Button Pressed!");
        navigator.app.exitApp();
    }
</script>

Put the following code in the else block of document.addEventListener in cordova-1.5.0.js after line-no 507

if (e === 'backbutton') {
    var exec = require('cordova/exec')
    exec(null, null, "App", "overrideBackbutton", [true]);
}

Put following code in fireDocumentEvent method of cordova definition in cordova-1.5.0.js after line-no 592

if(type == "backbutton"){
    var e = document.createEvent('Events');
    e.initEvent(type);
    if (data) {
        for (var i in data) {
            e[i] = data[i];
        }
    }
    document.dispatchEvent(e);
    return;
}

I have put the whole cordova-1.5.0.js in this gist with updated code https://gist.github.com/2020325

Though it is working for me but it still may need some changes to work in all the possible scenarios.

Edit

Put following code in fireDocumentEvent method of cordova definition in cordova-1.5.0.js after line-no 592

if(type == "backbutton" || type == "menubutton" || type == "searchbutton"){
        var e = document.createEvent('Events');
        e.initEvent(type);
        if (data) {
            for (var i in data) {
                e[i] = data[i];
            }
        }
        document.dispatchEvent(e);
        return;
    }

Override Android Backbutton behavior only works on the first page with PhoneGap (Version 6.2.0)

I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:

window.location="page.html"

Now the onBackKey() function is firing at every single page.

How to override back button only on single page in cordova 4.0?

Put the following in the html page where you need to trigger the back button :

document.addEventListener("backbutton", leavePage, false); 

    function onPageLeave(buttonIndex) {

        if(buttonIndex==1){
            window.history.back();
        }
        else{   
        }
    }

    function leavePage() {
        navigator.notification.confirm(
            'Would you like to leave  ?', // message
             onPageLeave,            // callback to invoke with index of button pressed
            'Leaving page request',           // title
            ['Yes','No']         // buttonLabels
        );
    }

Note that you'll need to notification plugin. Otherwise you could just replace with a simple alert().

[undefined] is not a function when handling backbutton event in PhoneGap

Check that you are linking the correct phonegap-x.js for the platform, the javascript code is different for android, iOS, etc.

When the back button is pressed in Android, the event 'backbutton' is fired, so if you want to go back in the navigation history, what you should do is attaching the following handler to it:

document.addEventListener("backbutton", function(e){
    e.preventDefault();
    navigator.app.backHistory();
}, true);

PhoneGap - android exit on backbutton

You need to wait for the device to be ready to add the event listener:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
       if($.mobile.activePage.is('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory();
       }
    }, false);
}

Phonegap Android Back Button - close app with back button on homepage

Update: this has stopped working with a latest Phonegap update (supposedly). Feel free to offer a working solution if you know it.

---

Here's how I do it:

document.addEventListener("backbutton", function(e){
    if($.mobile.activePage.is('#homepage')){
        /* 
         Event preventDefault/stopPropagation not required as adding backbutton
          listener itself override the default behaviour. Refer below PhoneGap link.
        */
        //e.preventDefault();
        navigator.app.exitApp();
    }
    else {
        navigator.app.backHistory()
    }
}, false);

For further information, here you can find the related documentation with a full example: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#backbutton

Back Button intercepted for ever - Phonegap/Android

the real solution to this question is probably to remove the event with this API:

document.removeEventListener("backbutton", onBackKeyDown, false);

I found it here

Handle Android Back Button on Phonegap InAppBrowser

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

---

Related Topics