动态加载的phonegap.js问题

Question

动态加载的phonegap.js问题

Max*_*Max 5 javascript mobile jquery jquery-mobile cordova

我正在尝试动态加载phonegap javascript文件(这样我可以选择在我使用Ripple时不在调试模式下加载它)但我正在遇到一些问题.

我使用普通的脚本标记加载jquery和jquerymobile javascript库.在另一个脚本块中,我做:

function onDeviceReady() { 
    alert("Device Ready!"); 
} 
$(document).ready(function() { 
    alert("doc ready!"); 
    $.getScript("js/phonegap.0.9.5.1.js", function() {alert("Got Phonegap!");}); 
    document.addEventListener("deviceready", onDeviceReady, false); 
});

Run Code Online (Sandbox Code Playgroud)

此代码提醒它"获得Phonegap!" 但从不警告"设备就绪".使用jsconsole.com,我可以看到PhoneGap javascript对象存在.但是,尝试调用device.uuid(或其他简单的phonegap API调用)失败.这几乎就像PhoneGap没有完全初始化.看起来不应该是这种情况.我错过了什么吗？谢谢!

Answer 1

Mis*_*ith 8

最后,我在不使用任何外部库的情况下使用它.

问题
对于多平台Phonegap项目,两个是不同平台的不同部分:

封装项目
Javacript Phonegap文件.

那些封装项目通常在项目过程中没有太大变化.希望有一个HTML5代码库可以直接粘贴(或使用构建脚本)到依赖于平台的项目上.由于javascript phonegap库位于Web文件集中,因此每次更换正确的文件真的很痛苦.

我的解决方案
在我的项目中,我有几个cordova文件,每个目标平台一个:

cordova.android.js
cordova.ios.js
cordoba.bb.js ...

(注意这些文件中的每一个文件是如何包含在应用程序中的.即使它没有被使用.对我来说这不是问题,因为脚本捆绑在应用程序中,只有正确平台的脚本被加载到内存中).

在我的页面中,我放置了加载器模块,而不是phonegap的脚本标签:

<script src="phonegap-loader.js"></script>

Run Code Online (Sandbox Code Playgroud)

这将是phonegap-loader.js脚本.我使用用户代理检测来动态地同步加载脚本:

    (function(){
        var useragent = navigator.userAgent;


        if(/Android/i.test(useragent)){
            loadScript('cordova.android.js');
        } else if((/iPhone/i.test(useragent)) || (/iPad/i.test(useragent))){
            loadScript('cordova.ios.js');
        }
        ...
        // Else desktop browser is assumed and no phonegap js is loaded


        function loadScript(url){
            // synchronous load by @Sean Kinsey 
            // https://stackoverflow.com/a/2880147/813951
            var xhrObj =  new XMLHttpRequest();
            xhrObj.open('GET', url, false);
            xhrObj.send('');
            var se = document.createElement('script');
            se.text = xhrObj.responseText;
            document.getElementsByTagName('head')[0].appendChild(se);
        }
    })();

Run Code Online (Sandbox Code Playgroud)

同步加载脚本非常重要.这给了我无数令人头疼的问题.在实现这一点之前,我尝试在头部底部添加脚本标记,并使用$ .getScript,但没有一个工作,因为ondeviceReady没有被触发.看起来确保在动态加载时执行Phonegap脚本的唯一有效方法是@Sean Kinsey在这个惊人的答案中所显示的(对他而言都是赞誉).

唯一的缺点是脚本是内联的,但对我而言,最好是从容器中分离核心HTML5应用程序,这是一个便宜的代价.

Answer 2

dha*_*val 3

我遇到了类似的问题，我需要根据平台类型加载 PhoneGap 和依赖的插件文件。我浏览了 PhoneGap 源代码，发现它使用窗口/浏览器事件来加载和准备对象。如果我手动调用浏览器事件，那么它会初始化运行应用程序所需的 PhoneGap 对象（API 和插件）。

使用 Yabble 的以下代码现在对我有用：

<html>
<head>
<script
    src="https://raw.github.com/jbrantly/yabble/master/lib/yabble.js"></script>

<script>
    require.setModuleRoot("js");
    require.useScriptTags();

    require.ensure([ "jquery", "phonegap" ], function(require) {

        // Trigger PhoneGap Initialization
        PhoneGap.onPhoneGapInit.fire();

        // Load PhoneGap Plugins
        require.ensure([ "plugin1" ], function() {
            $("#console").append("Plugin1 loaded<br>");
        });

        // Both following functions will work only if PhoneGap is loaded/initialized and Plugin is successfully registered

        // Check PhoneGap device object
        $("#checkDevice").click(function() {
            console.log(JSON.stringify(device));
        });

        // Call Native Plugin
        $("#callPlugin").click(function() {
            window.plugins.plugin1.call();
        });
    });
</script>
</head>
<body>
    <div id="console"></div>

    <input type="button" id="checkDevice" value="Check Device">
    <input type="button" id="callPlugin" value="Call Plugin">
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

设备信息和插件调用在 Android 上运行良好。虽然我还没有检查所有的 PhoneGap API，但到目前为止我只需要这两个就可以工作，而且它们正在工作。

编辑

在 Phonegap 1.5/Cordova 中，PhoneGap.onPhoneGapInit.fire();由于 API 更改而不可用。在我当前的测试中，动态加载 JS 后，大多数所需的对象都可以使用，无需任何更改。更新的测试可在这个要点 - Cordova Lazy Load Test

归档时间：	14 年，1 月前
查看次数：	5791 次
最近记录：	11 年，4 月前