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

Jquery MobileCordova

Jquery Mobile Problem Overview


I am developing a Android app using Jquery Mobile/Phonegap. I have the following code to control the phone's back button:

document.addEventListener("backbutton", backKeyDown, true); 


function backKeyDown() { 
    // Call my back key code here.
    $.mobile.changePage("#homepage", "slideup");
}

This all works fine, but I would like the app to close when pressing the back button on the homepage only, is this possible?

Jquery Mobile Solutions


Solution 1 - Jquery Mobile

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

Solution 2 - Jquery Mobile

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() 
{
 navigator.app.exitApp();
}

Thank you spader.

Solution 3 - Jquery Mobile

You would need to keep track of when the homepage is being displayed. When you know you are on the homepage call:

navigator.app.exitApp();

Solution 4 - Jquery Mobile

If you don't want to use jQuery Mobile, change $.mobile.activePage.is('#homepage') to document.getElementById('#homepage') on @Spadar Shut answer, as on following code:

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

Through this way, don't need to download Jquery Mobile gibberish only for this purpose. Also, activePage is deprecated as of JQuery mobile 1.4.0 and will be removed from 1.5.0. (Use the getActivePage() method from the pagecontainer widget instead)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDancerView Question on Stackoverflow
Solution 1 - Jquery MobileSpadar ShutView Answer on Stackoverflow
Solution 2 - Jquery MobileThomas V JView Answer on Stackoverflow
Solution 3 - Jquery MobileSimon MacDonaldView Answer on Stackoverflow
Solution 4 - Jquery MobilemeetnickView Answer on Stackoverflow