Geek Answers Handbook

Problem with dynamically loaded phonegap.js

I am trying to dynamically load the phonegap javascript file (so that I can not load it in debug mode when using Ripple), but I am encountering some problems.

I load jquery and jquerymobile javascript libraries using a regular script tag. In another block of script, I do:

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); 
});

This code warns that he "received a telephone connection!" but never warns "Device is ready." Using jsconsole.com, I see that there is a PhoneGap JavaScript object. However, trying to call device.uuid (or other simple phone API calls) does not work . This is almost the same as PhoneGap is not fully initialized. It doesn't look like it should be that way. Am I missing something? Thank you

+5
source share
5 answers

I ran into a similar problem in which I need to download PhoneGap files and dependent plugin files based on platform type. I went through the PhoneGap source and found that it uses windows / browser events to load and prepare objects. If I manually trigger browser events, it initializes the PhoneGap objects (APIs and plugins) that I need to run my application.

The following code that uses Yabble now worked for me:

<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>

Both device information and the plugin work fine on Android. Although I have not tested all the PhoneGap APIs, at the moment I only need these two to work, and they work.

Edit

Phonegap 1.5/Cordova, PhoneGap.onPhoneGapInit.fire(); - API. - JS . - Lazy Load Test

+3

, , .


Phonegap , :

  • Javacript.

. HTML- HTML5, ( ) . javascript phonegap , , .


cordova, :

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

( , , . , , ).

script :

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

phonegap-loader.js script. script:

    (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 
            // /questions/111417/dynamically-loading-javascript-synchronously/694109#694109
            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);
        }
    })();

script . . , $.getScript, , ondeviceReady . , , , Phonegap script , @Sean Kinsey ( ).

, script , , HTML5, , .

+8

1) addEventListener getScript?

2) phonegap.js ? ( iphone phonegap.js android "" )

0

deviceready - , phonegap.js duck punching document.addEventListener, phonegap.js , deviceready.

:

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);
    });
});
0
source

I was able to simulate the correct PhoneGap initialization workflow after it started dynamically by running the following javascript immediately after entering the phonegap.js script.

if (document.readyState == "complete") {

    PhoneGap.onDOMContentLoaded.fire();
}
0
source

More articles:


All Articles