41

I am trying to program RSS reader using jquery mobile and cordova. My RSS reader consists of 3 pages (in same HTML document: page1, page2, page3). I am trying to override (hardware)backbutton behaviour so it would exit the program. To check that I am not doing any mistakes in project setup I have used PhoneGap example project and loaded it in Eclipse. Every sample function worked so I have moved my index.html and res folder to phonegap example. In my index.html I import the folowing scripts:

<script src="res/jquery-1.7.1.min.js"></script>
<script src="res/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>

and my main.js file look like this:

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

You can check version of my scripts in first code sample. Any ideas on how I could get the code working so it would simply exit app when I press backbutton on my Xperia Arc? I can upload my full code if needed.

EDIT: I have tested phonegap(cordova) beep function on my android phone and it works so this doesnt have anything with bad script implementation. It must be something in main.js file. Maybe some compatibility issue with jquerymobile backbutton functions and phonegap backbutton function.

4
  • Do you have a page with id='homepage'?
    – mornaner
    Sep 11, 2012 at 13:03
  • yes I have a page with id='homepage'
    – horin
    Sep 11, 2012 at 14:29
  • What is the current behaviour of the back button?
    – mornaner
    Sep 11, 2012 at 14:32
  • It simply goes back in history. I have also tried simplier version without checking if the current page is homepage where app was supposed to exit always when I press backbutton but it didnt work.
    – horin
    Sep 11, 2012 at 14:39

5 Answers 5

87

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);
}
6
  • 3
    thank you it is working right now. I have used your solution but without e.preventDefault() code.
    – horin
    Sep 11, 2012 at 15:41
  • But what if i open another page, then navigate to #homepage. I expect the back button now to get me back to previous page instead of closing the app.
    – igrek
    Jul 18, 2014 at 12:57
  • 2
    @igrek How about maintaining any variable or using a Stack/Queue? I am also working on it as well :-) Feb 16, 2015 at 7:30
  • @igrek, that is not a very good mobile paradigm. Most apps do not work in the same navigation model as websites do; there is very often a "resetting" of the navigation stack, for certain significant pages, most often the base pages.
    – mix3d
    Jun 16, 2015 at 13:47
  • 4
    calling e.preventDefault or not does not seem to make a difference
    – philk
    Aug 26, 2016 at 0:19
12

If you don't want to use any library, you can use window.location.hash to get the "panel" your app is on. Example :

function onDeviceReady(){
    document.addEventListener("backbutton", function(e){
        if(window.location.hash=='#home'){
            e.preventDefault();
            navigator.app.exitApp();
        } else {
            navigator.app.backHistory()
        }
    }, false);
}
document.addEventListener("deviceready", onDeviceReady, false);
3
  • Hi @EtienneWan, Where I need to run this code. In my html code, or in phonegap application. I have created an app with phonegap which is running a remote URL or browser application, which is developed in PHP and HTML Apr 1, 2015 at 7:39
  • Thus code will work in a compiled application, not with the serve option, because cordova.js is needed and only Works on Android (for device events) Apr 1, 2015 at 10:13
  • Perfect solution, without extra plugins!
    – mix3d
    Jun 16, 2015 at 14:36
8

If you don't want to use Jquery Mobile, change $.mobile.activePage.is('#homepage') to document.getElementById('#homepage') on @mornaner 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)

1
  • Does this work for URL locations (maybe set via JS), and not just finding an element with an ID of "homepage"?
    – mix3d
    Jun 16, 2015 at 13:48
1

To disable the default behavior of the back button on android devices simply register an event handler for the back button. This would prevent the back button from closing the application.

Code shown below is specifically for Framework7

$(document).on('page:beforeinit', function (e) {
if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length > 1 ){
    document.addEventListener( "backbutton", disableBackButton, false );
}
});

function disableBackButton( e ){
    if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length < 3 ){
        document.removeEventListener("backbutton", disableBackButton );
    }

if( $.fn.hyellaIMenu.mainView.history && $.fn.hyellaIMenu.mainView.history.length > 1 ){
    $.fn.hyellaIMenu.mainView.router.back();
}
};

To override the default back-button behavior, register an event listener for the backbutton event.

NOTE: It is no longer necessary to call any other method to override the back-button behavior.

https://cordova.apache.org/docs/en/latest/cordova/events/events.html#backbutton

0
function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    //enter code here enter code heredevice APIs are available
    //enter code here
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
    }
1
  • Add some explanation with answer for how this answer help OP in fixing current issue Dec 21, 2016 at 7:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.