phonegap deviceready 事件 - 波纹模拟器答案

【问题标题】：phonegap deviceready event - ripple emulatorphonegap deviceready 事件 - 波纹模拟器
【发布时间】：2011-03-03 21:56:13
【问题描述】：

大家好
我在波纹铬扩展phonegap模拟器中没有正确触发初始phonegap'deviceready'事件处理程序的一些问题。

<script src="xui-2.0.0.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
-->
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<!-- <script type="text/javascript" charset="utf-8" src="main.js"></script> -->
<script>
    function onLoad() {
        //console.log(document);
        /*document.addEventListener('deviceready',function() {
                console.log('PHONEGAP_READY');
            },false);*/
        console.log('ON_LOAD');
        x$(document).on('deviceready', function() {
                console.log('PHONEGAP_READY');
            }, false);
    }

</script>

所以问题是 console.log('PHONEGAP_READY') 永远不会运行。我在这里使用 XUI 只是为了尝试官方波纹 phonegap 演示的工作方式（发布在他们的页面上）。既不是那个，也不是 document.addEventListener()，工作......奇怪的是，chrome 控制台输出显示为“PhoneGap :: 触发 deviceready 事件！”所以我假设事件确实正在触发，但事件处理程序本身没有被调用......
任何线索表示赞赏

谢谢

【问题讨论】：

嗨 Deepblue，你什么时候调用你的 onload 函数？在调用该函数之前，您不会设置处理程序。
为了简洁起见，我从这里的列表中省略了它。我在
对不起，我无法回答 - 只是想补充一下，我遇到了同样的问题，所以我开始了一个没有自己的 Java 或 js 的新 Eclipse 项目，按照 quickstart-HelloWorld 说明这封信和我得到相同的结果，部署到 DROIDX。 Logcat 中没有错误消息，但永远不会调用“deviceready”事件处理程序。也许它与覆盖 document.addEventListener 有关？
@Brandon - 是的，在 phonegap.0.9.4.js 中 document.addEventListener 在第 338 行被覆盖......正如你所说，它可能与此有关。请注意，在这种情况下，我在 chrome/ripple 中运行东西，因此不涉及 Eclipse/android 打包...

标签： cordova

【解决方案1】：

ripple 如何模拟 phonegap 的运行时有一个怪癖：docs here

ripple 将在文档加载之前注入 phonegap 运行时，如果您在应用中包含 phonegap.js 文件，它将覆盖ripple 模拟环境，这可能会导致问题。

尝试从您的页面中删除 phonegap 源并重新加载以查看是否有帮助。

【讨论】：

yyyyyeeeeesssssssssssssssssssssssssssssssssssssssssssssssss :) 谢谢戈德。顺便说一句，你们做了一个地狱般的工具。谢谢
谢谢，从我的 index.html 文件中删除包含的 cordova-2.7.0.js 并使用此处提到的 URL 示例 (stackoverflow.com/a/15317390/763010) 对我有用。
Ripple 已移至 Apache！有其他链接吗？

【解决方案2】：

我也花了几个小时试图解决这个问题。将有助于在 Ripple UI 中手动将 Cordova 平台版本设置为 2.0（左窗格 > 平台 > 版本：从 1.0 更改为 2.0）。太傻了，我用这个 URL 打电话给 Ripple

http://localhost?enableripple=cordova-2.7.0-Nexus4

但我仍然必须手动更改设置才能最终运行。那是因为 Ripple 不知道任何高于 2.0.0 的版本，这使得它只需在 UI 中将平台版本设置为 1.0.0……然后它就使用它。

还有更多详情on my blog。

【讨论】：

这是一个救生员。谢谢！

【解决方案3】：

试试http://localhost:8080/index.html?enableripple=cordova-2.0.0，这对我来说可以触发 deviceready 事件

【讨论】：

谢谢！这和@Gord 的回答相结合对我有用！
这对我有用，只是将 de cordova-x.0.0 与已安装的 cordova package.json 中的匹配，例如在我的窗口中 C:\Users\drodsou\AppData\Roaming\ npm\node_modules\phonegap\node_modules\cordova

【解决方案4】：

在您的 html 文件中包含 Cordova 脚本，如下所示。

    <script  src="cordova-2.7.0.js"></script>

【讨论】：

【解决方案5】：

仅供参考，将查询字符串中的 cordova-x.x.x 更改为您应用中安装的版本也会导致设备准备好在更新版本的涟漪 http://www.raymondcamden.com/index.cfm/2013/11/5/Ripple-is-Reborn 中触发。

http://localhost:4400/?enableripple=cordova-3.0.0 (Default, not firing)

http://localhost:4400/?enableripple=cordova-3.2.0 (Changed to my version, firing)

【讨论】：

【解决方案6】：

基于上述建议，这里是 Visual Studio 2015 RC cordova 应用程序的完整 index.js（编辑提供的模板）：

(function () {
    "use strict";
    function bootstrapAngular() {
    console.log("Bootstrapping AngularJS");
    // This assumes your app is named "app" and is on the body tag: <body ng-app="app">
    // Change the selector from "body" to whatever you need
    var domElement = document.querySelector('body');
    // Change the application name from "app" if needed
    angular.bootstrap(domElement, ['app']);
    }
    if (document.URL.indexOf('http://') === -1
        && document.URL.indexOf('https://') === -1) {
        console.log("URL: Running in Cordova/PhoneGap");
        //document.addEventListener("deviceready", bootstrapAngular, false);
        document.addEventListener('deviceready', onDeviceReady.bind(this), false);
    } else {
        console.log("URL: Running in browser");
        bootstrapAngular();
    }
    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        bootstrapAngular();
    };
    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };
    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
} )();

此外，他们并没有在上面真正指出这一点，但你不应该在你的 body 标签中放置任何东西来完成这项工作。功能会为您做到这一点。最后，别忘了在某处应用 ng-controller，你还是要指定。

【讨论】：