jquery mobile会干扰phonegap中脚本处理的顺序吗？答案

【问题标题】：will jquery mobile interfere with the order of script processing in phonegap?jquery mobile会干扰phonegap中脚本处理的顺序吗？
【发布时间】：2014-12-12 10:33:34
【问题描述】：

大家晚上好，当涉及到触发 deviceready 事件时，我在使用带有 phonegap 的 jquery mobile 时遇到了问题，该事件包含访问设备 uuid 的代码并知道设备是否已连接到互联网。

为了让我的观点更清楚，我在没有 jquery 的情况下运行的代码

省略代码：

<body onload="init()">
</body>
<script type="text/javascript">

            var online = false;
            var devceid;

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


            function onDeviceReady()
            {
                devceid = device.uuid;
                alert(devceid);
                if (navigator.network.connection.type != Connection.NONE) {
                    alert('device is online');
                    online = true;
                 }else{
                    alert('device is offline');
                 }     
            }
        </script>

如果我不包含 jquery 和 jquery 移动脚本，上面的代码可以完美运行。

现在这里是包含 jquery 和 jquery mobile 的代码

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

<script type="text/javascript">

            var online = false;
            var devceid;

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


            function onDeviceReady()
            {
                devceid = device.uuid;


                alert(devceid);
                if (navigator.network.connection.type != Connection.NONE) {

                    alert('device is online');
                    online = true;
                    //networklistener();
                 }else{
                    alert('device is offline');

                    //networklistener();
                 }  




            }


        </script>
         <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.5.js"></script>
        <script type="text/javascript">
                $(document).on( "pagecontainershow", function(){
                    ScaleContentToDevice();

                    $(window).on("resize orientationchange", function(){
                        ScaleContentToDevice();
                    })
                });

                function ScaleContentToDevice(){
                    scroll(0, 0);
                    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() -         $(".ui-footer").outerHeight() -      $(".ui-content").outerHeight() + $(".ui-content").height();
                    $(".ui-content").height(content);
                }

        </script>

在我运行应用程序后，函数 init 被绕过，它直接进入函数 scalecontent 我有点困惑。

将 jquery mobile 与 phonegap 混合使用是个好主意吗？

谢谢

【问题讨论】：

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

尝试移除 onload 功能

    <body>
    </body>

    <script type="text/javascript">

            var online = false;
            var devceid;


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

            function onDeviceReady()
            {
                devceid = device.uuid;


                alert(devceid);
                if (navigator.network.connection.type != Connection.NONE) {

                    alert('device is online');
                    online = true;
                    //networklistener();
                 }else{
                    alert('device is offline');

                    //networklistener();
                 }  

            }

        </script>
         <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.5.js"></script>
        <script type="text/javascript">
                $(document).on( "pagecontainershow", function(){
                    ScaleContentToDevice();

                    $(window).on("resize orientationchange", function(){
                        ScaleContentToDevice();
                    })
                });

                function ScaleContentToDevice(){
                    scroll(0, 0);
                    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() -         $(".ui-footer").outerHeight() -      $(".ui-content").outerHeight() + $(".ui-content").height();
                    $(".ui-content").height(content);
                }

    </script>

【讨论】：