在 PhoneGap 中使用 jQuery 和 deviceready 时遇到问题答案

【问题标题】：Trouble using jQuery & deviceready with PhoneGap在 PhoneGap 中使用 jQuery 和 deviceready 时遇到问题
【发布时间】：2017-09-25 19:58:25
【问题描述】：

这似乎是一个重复的问题，但事实是我已经尝试了堆栈和其他网站上可用的几种语法，但无济于事。

我正在 PhoneGap 中开发我的第一个应用程序。最初，我使用了在浏览器中运行良好的 document.ready。后来我发现它在应用程序中不起作用，我需要使用 deviceready。

问题是我已经从 docs & stack 尝试了几种语法，但都失败了。

另外，请让我知道我是否需要使用任何插件来使用 deviceready。

我的代码测试表明，deviceready 事件侦听器和任何 jQuery 代码都不能在我的应用程序中运行。不知道为什么？

index.html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="www/js/jquery.touchSwipe.min.js"></script>
<script src="www/js/index.js"></script>
</body>

index.js：

alert('Entered JS') ;
document.addEventListener("deviceready", onDeviceReady, false);

$(document).ready(function () {

    function onDeviceReady() {

        alert ('Device Ready') ;
        //this one is not showing

    };
});

这是我最近的试用。

感谢大家帮助我。问题的解决方法如下：

1 -> 请勿使用 URL 加载任何 css 、 js 或其他文件，因为 phoneGap 或 Cordova 默认情况下不允许这样做。 2 -> 如果您的应用要求您通过网络发送请求，请使用 Cordova 的 cordova-plugin-whitelist 插件将您的网址列入白名单。 3 -> 代码如下：

index.html：

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
<script src="www/js/jquery.min.js"></script>
        <script type="text/javascript" src="www/js/jquery.touchSwipe.min.js"></script>
    <script src="cordova.js"></script>
    </head>
    <body>
        ...
    <!-- Loading js containing deviceready & other functions-->
    <script src="www/js/index.js"></script>
    </body>

可以看出，需要包含cordova.js。

index.js：

$(document).ready(function() {
    window.isphone = false;
    if(document.URL.indexOf("http://") === -1 
        && document.URL.indexOf("https://") === -1) {
        window.isphone = true;
    }

    if( window.isphone ) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady ()
{
    //...
}

以上代码可确保您的应用无需任何更改即可在网络和设备上运行。如果您只想要基于设备的 .js ，那么只需使用：

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

【问题讨论】：

您的 index.html 中是否包含 cordova.js 脚本？ deviceready 事件需要它。因此，将其导入头脑中很重要，以避免与每个脚本的加载顺序相关的奇怪问题。
这是我的代码中的问题之一。我找到了解决方案并会尽快更新。谢谢大家...

标签： javascript jquery cordova phonegap

【解决方案1】：

我使用 require js 来加载文件。代码如下

index.html

<script type="text/javascript">
    require(['index.js'], function () {

    });
</script>

index.js

var MobileApp = function() {
    /*Constructor for Mobile App*/
}


MobileApp.prototype = {
    w_deviceId: 0, 
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        // your code goes here
    },
}

var w_app = new MobileApp();
w_app.initialize();

【讨论】：

【解决方案2】：

你做错了顺序，先调用jQuery-ready-event再调用cordova-ready-event：

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

function onDeviceReady(){
       // start your app here.
}

【讨论】：

我需要包含cordova.js吗？
如果我在 onDeviceReady 中编写与事件相关的 jquery 代码，比如 .keypress 和其他，可以吗