0

I am building an with cordova.js library [version 3.4.1] and I would also like to debug it as web page directly using the web browser.

There are some issues in iOS emulator when loading dynamically the external cordova.js library [I have 2 version specific for android and iOS]

I have this piece of code in place to deal with this:

//check if mobile or local browser:
var isMobile = true;
if (document.URL.indexOf("local") > 0) {
    isMobile = false;
}

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

function onDeviceReady () {
    deviceReadyDeferred.resolve();
}
if (isMobile) {
    $(document).bind('mobileinit', function () {
        $.mobile.allowCrossDomainPages = true;
        jqmReadyDeferred.resolve();
        var useragent = navigator.userAgent;

        var loadScript = function (url) {
            url = url.replace(/\//, '\\/');
            document.write('<script charset="utf-8" src="' + url + ' "><\/script>');
        };

        if (/Android/i.test(useragent)) {
            $.getScript('js/lib/cordova_android.js', function (data, textStatus, jqxhr) {
                document.addEventListener("deviceReady", onDeviceReady, false);
            });
        } else {
            loadScript('js/lib/cordova_ios.js');
            setTimeout(function () {
                document.addEventListener("deviceReady", onDeviceReady, false);
            }, 500);
        }
    });
} else {
    jqmReadyDeferred.resolve();
    onDeviceReady();
}

So when the page is requested with localhost... then the isMobile is set to false. Is there a reason why iOS [6.1] does not load the external script like Android did [with jQuery getscript ] instead than the horrible hack ? I tried to debug and it seems that iOS is reporting status error 400 when requesting the script.

Followed the logic used in this other SO question: Issue with dynamically loaded phonegap.js

UPDATE:

Following the suggestion of the accepted answer, I rewrote the whole function and now it is working well both in iOS / ANDROID and local browser:

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

(function () {
    //check if mobile or local browser:
    var isMobile = true;
    var useragent = navigator.userAgent;

    var cordova_js = 'cordova_';
    if (/Android/i.test(useragent)) {
        cordova_js += 'android.js'
    } else if ((/iPhone/i.test(useragent)) || (/iPad/i.test(useragent))) {
        cordova_js += 'ios.js'
    } else {
        // local browser testing
        isMobile = false;
        jqmReadyDeferred.resolve();
        onDeviceReady();
    }

    if (isMobile) {
        $(document).bind('mobileinit', function () {
            $.mobile.allowCrossDomainPages = true;
            jqmReadyDeferred.resolve();

            var url = document.URL;
            url = url.substring(0, url.lastIndexOf("/"));
            $.getScript(url + '/js/lib/' + cordova_js, function (data, textStatus, jqxhr) {
                document.addEventListener("deviceReady", onDeviceReady, false);
            });
        });
    }

    function onDeviceReady () {
        deviceReadyDeferred.resolve();
    }
})();
Community
  • 1
  • 1
dawez
  • 2,714
  • 2
  • 29
  • 50

1 Answers1

0

Your isMobile check is prone to break. Think of a remote URL like this:

http://www.somesite.com/local/foo/bar

And probably the "local" URL in iOS looks different. Try logging the document.URL in iOS to check, or maybe show it in an alert if console is not an option.

Mister Smith
  • 27,417
  • 21
  • 110
  • 193
  • Thx, that is a good hint. I revised my original question above adding the full new code that can be useful for someone. – dawez May 09 '14 at 09:30