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

Question

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?

public class MainActivity extends Activity { – Android Aug 22 '14 at 06:59 — Android, Aug 22 '14 at 06:59

Spadar Shut · Accepted Answer · 2017-07-04T07:26:12.083

121

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

edited Jul 04 '17 at 07:26

answered Dec 28 '11 at 23:22

Spadar Shut

15,111
5
47
54

4

Why you use `e.preventDefault()`? – Ali Shakiba Oct 08 '13 at 11:43
1

e.preventDefault is used to cancel the default action of the event, in this case backHistory(), (in other words the same, to prevent that the default action will not be triggered). – Ignacio Rubio Aug 27 '14 at 06:42

score 12 · Answer 2 · answered Sep 17 '12 at 04:46

12

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

Thank you spader.

answered Sep 17 '12 at 04:46

Thomas V J

658
8
7

1

is it necesssary to wrap the backbutton listener within a deviceready listener as shown here? I've seen the 'backbutton' solution described several times in different places (including elsewhere on stackoverflow) and none show it specifically wrapped like you have here. Would be good if someone can clarify – Andy Lorenz May 13 '14 at 22:55

score 9 · Answer 3 · answered Dec 22 '11 at 16:06

9

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();

answered Dec 22 '11 at 16:06

Simon MacDonald

23,253
5
58
74

Where is the phonegap doc for navigator.app.exitApp() [and other navigator.app extensions]? I couldn't find it at http://docs.phonegap.com/en/2.2.0/index.html – Samik R Dec 30 '12 at 23:08
It's not documented since it is not cross platform. If you want to learn what is available for Android then open up the cordova.js in your text editor and search for "cordova/plugin/android/app". There is actually a few good comments in the code that can help you figure out what is going on. – Simon MacDonald Dec 31 '12 at 13:47
Thanks Simon - will check it out. – Samik R Jan 01 '13 at 16:53

score 1 · Answer 4 · edited Jan 23 '17 at 14:08

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)

How to set homepage to my index.html? i.e. document.getElementById('#homepage') doesn't work. — Zac, Jun 26 '17 at 04:13

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

4 Answers4

Linked