cannot load external scripts

12 posts, 0 answers
  1. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 15 Mar 2013 Link to this post

    Hi guys, 

    It seems that a script tag in html with an external src automatically gets added to some whitelist, however this doesnt seem to be the case for scripts created programmatically -
     document.createElement(''script") , with an src like "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"  does not get added to the list.

    Same issue applies if I use a script loader such as headJS
  2. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 16 Mar 2013 Link to this post

    Hello Gal,

     When referencing external resources you need to include the full protocol in the URL. With that, your example becomes: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js". This is because Cordova apps run in file:// URLs on the device and scheme-less URLs get resolved to file:// rather than http:// or https://. For instance, your app's index.html on Android is actually file:///android_asset/www/index.html.

     However, I'd suggest including whatever resources you need in your app, rather than downloading them from the web. This accomplishes two things: your app loads faster and it can run offline. What's more, Apple rejects apps that don't work at all when the device is offline. So it's a better practice to include the JavaScript and CSS your app needs to run in the app itself, rather than referencing it externally.

    Regards,
    Yavor Georgiev
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  3. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 17 Mar 2013 Link to this post

    Sorry, looks like my initial question was unclear.

    I think the problem I am having is that I am using a script loader (headJS) to load scripts, both local and external, in parallel. You can even try this with the default sample application, when I try to load the google maps API from headJS, it fails to find it - meanwhile, other local js files are loaded with no issue. If I load the API using the script tag in html, it loads with no problems.

  4. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 19 Mar 2013 Link to this post

    Hello Gal,

     I've tried to load jQuery from the Google CDN with HeadJS both on the simulator and on an iOS device and it has worked for me. I just modified the black application template. Does this code run for you? Can you modify it to match your app?
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <script src="js/head.min.js"></script>
            <title>Hello World</title>
        </head>
        <body>
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">Connecting to Device</p>
                    <p class="event received">Device is Ready</p>
                </div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
                head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js", function () {
                   $(".app").css("background-color", "red");
                });
            </script>
        </body>
    </html>


     Also, I'll need to know the device and OS version you're observing this behavior on so that I can try to replicate your environment as closely as possible.

    Kind regards,
    Yavor Georgiev
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  5. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    well, I used the kendo UI template to start with. This is the code I have:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>

            <!--       <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script src="scripts/hello-world.js"></script> -->
            
            <script src="scripts/head.min.js"></script>
            <script>
                head.js("http://maps.google.com/maps/api/js?sensor=true",
                        "scripts/hello-world.js",
                        function() {
     
                           // all done
                         
                        });
            </script>
            
            
            
            
            

            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
                <h1>Welcome!</h1>
                <p>
                    Icenium&trade; enables you to build cross-platform device applications regardless of your 
                    development platform by combining the convenience of a local development toolset with the 
                    power and flexibility of the cloud.
                </p>
            </div>

            <div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
                <h1>Say Hello!</h1>
                <div id='helloWorldInput'>
                    <label for="txtName" style="display: inline-block;">Enter your name:</label>
                    <input type="text" id="txtName" value="" />
                </div>
                <div id='helloWorldText' style="display:block;"></div>
                <div class="buttonArea">
                    <a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
                    <a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>
                </div>
            </div>

            <div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
                <h1>My Location</h1>
                <div id="geoLocationContainer">
                    <div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
                    <a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
                    <div id="map_canvas"></div>
                </div>
            </div>

            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>

                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
                        <a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
                    </div>
                </div>
            </div>

            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>
  6. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    I forgot to mention, I tried this on the default iphone, iphone 5, and android phone simulators. I believe I had the same issue on my iphone 4 with icenium ion as well
  7. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 19 Mar 2013 Link to this post

    Hello Gal,

     The code you sent works for me both in the Simulator and on an iPhone 4S. However, I'm using the latest HeadJS version, 0.99, downloaded from the website.

     Does the same code with the same HeadJS work in Mobile Safari?

    Kind regards,
    Yavor Georgiev
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  8. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    Yes, it's the same version I'm using:
    https://raw.github.com/headjs/headjs/v0.99/dist/head.min.js
    0.99, minified, full bundle, from the site.

    How do i take my app from icenium and test it safari mobile?

    Also, my desktop browser is Chrome, latest version, Mac OSX 10.8
  9. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 19 Mar 2013 Link to this post

    Hi Gal,

     I apologize if I was unclear. I'd suggest exporting your project and putting it on a webserver somewhere and then access it in Mobile Safari. The Cordova parts will fail, of course, but we just need to see if HeadJS will load the scripts correctly in the native browser.

     Cordova apps use the same rendering engine as Mobile Safari so it would be very helpful to see if HeadJS works for one and not the other or not at all.

     However, the code works fine in the Graphite Simulator so I don't really know what could be causing this issue. It certainly isn't the whitelist as the Cordova whitelist permit all domains by default.

    Kind regards,
    Yavor Georgiev
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  10. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    Ok, I uploaded the code to a server. 
    https://projects-galcohen.rhcloud.com/headjstest/test/

    Tried it on chrome, did not work, however, it did prompt chrome to ask me if i want my location to be used, though it still failed to after.

    tried it on safari on iphone 4, same thing, the dialog comes up asking me to allow location services, i hit ok and then the Refresh Location Button, and still doesnt work. weird.


  11. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 19 Mar 2013 Link to this post

    Hi Gal,

     I managed to solve the problem. It turns out that the Google Maps API already has a script loader similar to HeadJS it uses internally. According to this issue on GitHub, you need to use special handling when asynchronously loading the Google Maps API and pass a callback function (much like JSONP) to the Google Maps API loader.

     All you need to do is to pass the name of the callback function in the URL when loading the Google Maps API like so: http://maps.google.com/maps/api/js?sensor=false&callback=getLocation. This will invoke the getLocation function defined in scripts/hello-world.js and will make the Refresh Location button work.

    Kind regards,
    Yavor Georgiev
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  12. Gal
    Gal avatar
    24 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    Good find, thank you.
Back to Top