Phonegap Device Ready Events

Overview

This event is essential to any application. It signals that Cordova’s device APIs have loaded and are ready to access.

Phonegap / Apache Cordova consists of two code bases. Those are native and JavaScript. While the native code loads, a custom loading image displays. However, JavaScript only loads once the DOM loads. This means the web app may potentially call a Cordova JavaScript function before the corresponding native code becomes available.

phonegap deviceready syntax

document.addEventListener("deviceready",callbackfunction,false);

Phonegap device ready example

<!DOCTYPE html>
<html>
  <head>
    <title>Phonegap / Apache Cordova Device Ready Example</title>
    <script type="text/javascript" src="cordova.js"></script>
    // Wait for device API libraries to load
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    // device APIs are available
    function onDeviceReady() {
        alert("device ready event occured");
    }
    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>
  • Dre

    Hello Sundarave,
    Thank you for posting this, i am very new to PhoneGap.

    With the new version of phonegap I’m not sure this is possible due to security on inline event handlers. I have read that we must reference an external JS file. If you can provide an example of that it would be awesome.

    Cheers
    Dre

Share This

Share this post with your friends!