Question

请查看并帮我解决此问题。我花了2天头痛。永远不会调用onDeviceReady函数。这是我的代码：

    <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
            <title>DemoSimpleControls</title>
            <meta name="viewport"
                content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
                <link rel="shortcut icon" href="images/favicon.png">
                    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
                        <link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
                            <link rel="stylesheet" href="css/DemoSimpleControls.css">

                                <script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
                                <script src="../js/jquery-1.9.1.min.js"></script>
                                < script  type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
                                <script type="text/javascript" charset="utf-8">
                                    $(document).ready(function() {
                                                      // Handler for .ready() called.
                                                      document.addEventListener("deviceready", onDeviceReady, true);
                                                      });
                                    $(function() {
                                      document.addEventListener("deviceready", onDeviceReady, true);
                                      });
                                    function onDeviceReady(){
                                        alert("ready");
                                        $("#mysavedData").html("XYZ");
                                        $("#mysavedData").html(window.localStorage.getItem("data"));
                                    }

                                </script>
                                </head>

    <body id="content" onLoad="onLoad();" >
        <div data-role="page" id="page">
            <div data-role="header" >
                <a data-rel="back" href="#" >Back</a>
                <h1>My page</h1>

            </div>
            <div data-role="content" style="padding: 15px" data-theme="e">
                <div id="mysavedData">My data</div>

            </div>

        </div>
    </body>
</html>

Answer 1

那个事件太可怕了，有很多问题，不值得使用它。相反，只需通过检查window.device即可轮询，直到PhoneGap准备就绪。

演示：

使用Javascript：

function initializePhoneGap( success, failure ) {
    var timer = window.setInterval( function () {
        if ( window.device ) {
            window.clearInterval( timer );
            success();
        };
    }, 100 );
    window.setTimeout( function () { //failsafe
        if ( !window.device ) { //phonegap failed
            window.clearInterval( timer );
            failure();
        };
    }, 5000 ); //5 seconds
};

window.onload = function () {
    initializePhoneGap( function success() {
        //start app
        document.getElementById( 'result' ).textContent = 'phonegap: success';
    }, function failure() {
        //phonegap failed 
        document.getElementById( 'result' ).textContent = 'phonegap: failure';
    } );

};

HTML：

should fail on desktop after 5 seconds
<div id="result">phonegap:</div>

Answer 2

请看PhoneGap网站上的以下示例。将事件侦听器放在onLoad（）中并从jQuery ready函数中删除它。

<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.5.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
    // Now safe to use the Cordova API
}

</script>

说明： Cordova包含两个代码库：本机代码和JavaScript代码。在加载本机代码时，会显示自定义加载图像。但是，只有在DOM加载后才会加载JavaScript。这意味着您的Web应用程序可能会在加载之前调用Cordova JavaScript函数。

当Cordova满载时，Cordova deviceready事件将会激活。设备触发后，您可以安全地调用Cordova功能。

通常，一旦HTML文档的DOM加载，您将需要使用document.addEventListener附加事件侦听器。

Answer 3

此代码适用于我

<body onload="init()"></body>

function init() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
    // Now safe to use the Cordova API
}

快乐的编码.......

Answer 4

您似乎不知道要触发此活动，您还需要包含 phonegap.js 文件，
并且还像我一样使用它，以便首先加载视图然后应用程序处理phonegap，否则用户将不得不等待更多。

<html>
  <head>
  ....
  <title>Index file</title>
   </head>
 <body>
   ....


    <script type="text/javascript" src="phonegap.js"></script> //you forgot this
</body>
</html>

Phonegap - onDeviceReady（）未被触发

4 个答案:

使用Javascript：

HTML：