Phonegap 未调用设备就绪功能答案

【问题标题】：Phonegap not calling device ready functionPhonegap 未调用设备就绪功能
【发布时间】：2017-12-01 05:12:16
【问题描述】：

我无法让设备就绪功能在 phonegap （即 xcode 模拟器）中工作。 html如下：`

    <title>Boilerplate</title>
</head>
<body>

    <div id="main" data-role="page">
        <div data-role="header" class="logo">
            <img class="logo" src="img/premium-logo.jpg" />
        </div>

        <div data-role="content">

            <h1>Apache Cordova Test Zone</h1>
            <div class="test-zone" id="test-zone">

            </div>

        </div>

        <div data-role="footer">

            <h4>Footer of main page</h4>

        </div>

    </div>



    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/jQuery-Mobile-1.3.1-min.js"></script>
    <script type="text/javascript" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        $(document).ready(init());
    </script>
</body>

Javascript 文件 index.js：

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

 function onDeviceReady() {
   alert('It works!');
 }

如果我注释掉 init 函数内的行并简单地用 onDeviceReady(); 替换它我可以在 chrome 上收到提醒。

为什么不能在模拟器中使用上面的代码。谢谢

【问题讨论】：

我会尝试在$(document).ready() 之外注册document.addEventListener("deviceready", onDeviceReady, false);。除此之外，$(document).ready() 将function 作为参数，例如。 $(document).ready(init);
我尝试调用 document.addEventListener("deviceready", onDeviceReady, false);我已经准备好在设备上调用初始化函数。仍然看不到哪里不起作用
那么，日志中有什么？我没有机会使用适用于 iOS 的 PhoneGap，但使用 Adnroid，由于 JS 损坏，它并没有触发几次，我可以在调试日志中看到它

标签： javascript html cordova

【解决方案1】：

onDeviceReady 事件仅在从设备模拟器测试您的 phonegap 应用程序时起作用，而不是在 chrome 中。

这是我发现让两个框架（phonegap 和 jQuery Mobile）协同工作的最佳方式。

在我的 index.html 中

 <script type="text/javascript" src="js/libs/LABjs/LAB.min.js"></script>
 <script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>

请注意我使用 LABjs 库来加载 JS 脚本（cordova.js 只有在我们检测到我们在设备中时才会被加载），您可以在 google 中找到 LABjs 库。

在我的“js/index.js”中

 var deviceReadyDeferred = $.Deferred();
 var jqmReadyDeferred = $.Deferred();
 var resourcesReady = false;


 var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);

        //load scripts
        if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
            $LAB.script("cordova.js").wait(
                function(){
                    document.addEventListener('deviceready', this.onDeviceReady, false);
                    console.log('We are on Device');
                }
            );
        }else
        {
            console.log('We are on Browser');
            var _this = this;
            setTimeout(function(){
                _this.onDeviceReady(); 
            }, 1);
        }

        console.log('app.initialize() Called');
        $.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady);
    },

    // deviceready Event Handler
    onDeviceReady: function() {
        console.log("onDeviceReady");
        deviceReadyDeferred.resolve();
    },

    doWhenBothFrameworksReady: function()
    {
        console.log("doWhenBothFrameworksReady");
        resourcesReady = true;
    }
};

$(document).one("mobileinit", function () {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.phonegapNavigationEnabled = true;
    console.log('MobileInit');
    jqmReadyDeferred.resolve();
 });



function PageShowFunction(e)
{
    // we are sure that both frameworks are ready here
}

function CallPageEvent(funcToCall,e)
{
    if(resourcesReady)
    {
        return funcToCall(e);
    }else
    {
        setTimeout(function() {
            CallPageEvent(funcToCall,e);
        }, 200);
    }
}


$(document).ready(function () {
    console.log("document ready");
    // ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late 
    // example:
    // I use the CallPageEvent beacause this event could be called before the device ready
    /* 
     $("#page").on("pageshow", function(e) {
                CallPageEvent(PageShowFunction,e);
            }
     */



});

app.initialize();

【讨论】：

是的，我知道我只是说我使用 chrome 来检查函数是否被调用。但它仍然无法在 IOS 模拟器上运行。它会加载应用程序，但不会显示我在 onDeviceReady 函数中的警报消息
那么问题是当您在文档的“就绪”事件中设置事件时，onDeviceReady 函数已经被触发。 phoneap 和 jquery mobil 一起工作时遇到了这个问题，我将发布一个使用两个框架的完整方法。
感谢您的时间和精力
不客气，如果您这样做，您的 html 将在浏览器（PC）和设备上运行。

【解决方案2】：

添加

<script type="text/javascript" src="cordova.js"></script>

在您的 index.html 文件中，为我工作；）

【讨论】：

【解决方案3】：

随便用

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
     init(); 
</script>

代替

 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){ init(); });
 </script>`

【讨论】：