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.

mornaner
  • 2,424
  • 2
  • 27
  • 39
horin
  • 1,664
  • 6
  • 23
  • 52

5 Answers5

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);
}
decates
  • 3,406
  • 1
  • 22
  • 25
mornaner
  • 2,424
  • 2
  • 27
  • 39
  • 3
    thank you it is working right now. I have used your solution but without e.preventDefault() code. – horin Sep 11 '12 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 '14 at 12:57
  • 2
    @igrek How about maintaining any variable or using a Stack/Queue? I am also working on it as well :-) – Faizan Mubasher Feb 16 '15 at 07: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 '15 at 13:47
  • 4
    calling `e.preventDefault` or not does not seem to make a difference – philk Aug 26 '16 at 00:19
  • Sorry but what is #homepage - how to set that to index.html? Thanks. – Zac Jun 26 '17 at 04:07
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);
Etienne Wan
  • 257
  • 3
  • 11
  • 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 – Sushil Kandola Apr 01 '15 at 07: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) – Etienne Wan Apr 01 '15 at 10:13
  • Perfect solution, without extra plugins! – mix3d Jun 16 '15 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)

Jake N
  • 10,535
  • 11
  • 66
  • 112
meetnick
  • 1,196
  • 2
  • 12
  • 28
  • Does this work for URL locations (maybe set via JS), and not just finding an element with an ID of "homepage"? – mix3d Jun 16 '15 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() {
    }
dev
  • 1