You are browsing the archive for deviceready.

Tip #3: Implementing the Back button behavior for Android and Windows Phone 8 Apps

December 9, 2014 in Apache Cordova, Book, JavaScript

If you use Apache Cordova for developing your Android and Windows Phone 8 mobile apps, you may need to exit the app when the user clicks on the back button on the app’s home page, and to navigate back when the user clicks the back button and the current page is not the home page.

Note that back button usually exists in Android and Windows Phone 8 devices.

In order to do implement this behavior, you can implement the “backbutton” event handler after the “deviceready” event is triggered. This is an example to implement this in jQuery mobile.

    var homePage = "appHome";
   
    //Handle back buttons decently for Android and Windows Phone 8 ...
    function onDeviceReady() {
        document.addEventListener("backbutton", function(e){
            if ($.mobile.activePage.is('#' + homePage)){
                e.preventDefault();
                navigator.app.exitApp();
            } else {
                history.back();
            }
        }, false);
    }

    $(document).ready(function() {
        document.addEventListener("deviceready", onDeviceReady, false); 
    });

Using navigator.app.exitApp(), you can exit your mobile app when the app user is in the home page. And using history.back(), you can navigate back to the previous page when the app user is in other pages.

Reference:

“JavaScript Mobile Application Development” Book:

Overriding Android back button behavior in Apache Cordova

January 24, 2013 in Ajax, JavaScript, mobile, Web 2.0

If you are using Apache Cordova for building a native application on mobiles using HTML, CSS, and JavaScript. You may need to override the default behavior of the back button on the Android mobiles to implement your application specific back button behavior.

In order to do this, you can register an event handler on the "backbutton" event on the document object but before you do this, you need to make sure that the device is ready using the "deviceready" event as follows.

// In the initialization ...
document.addEventListener("deviceready", deviceReadyHandler, false);  


function deviceReadyHandler () {
    document.addEventListener("backbutton", backButtonHandler, false);
}


function backButtonHandler(e) {
    //Here implement the back button handler
}
Skip to toolbar