Search code examples
javascripthtmlloadjsonphead

Can running JavaScript code load JSONP instead of a script tag?


I just got JSONP working with the help of answers to this great question. Now, in my setup, the HTML file loads JavaScript via the script tag:

<script src="js/playlistcontroller.js"></script>

Now my question is, can this code, while running, trigger loading my JSONP response?

The goal is to avoid having

<script src="playlistcontent.jsonp"></script>

in the HTML Head, but do that stuff in the controller (which happens to be an AngularJS controler, if you are curious).

It this possible (Loading JavaScript from JavaScript)?


Solution

  • Fully-cross browser tested script:

    var CFLoad = {
        fScript : null,
        isFileReady : function ( v ) {
            return ( ! v || v == "loaded" || v == "complete" || v == "uninitialized" );
        },
        js : function(src,cb,attrs) {
            var s = document.createElement( "script" ),
                done = !1, i;
            s.src = src;
            s.type = "text/javascript";
            for ( i in attrs ) {
                s.setAttribute( i, attrs[ i ] );
            }
            s.onreadystatechange = s.onload = function () {
                if ( ! done && CFLoad.isFileReady( s.readyState ) ) {
                    done = !0;
                    if(cb) cb(s);
                    s.onload = s.onreadystatechange = null;
                }
            };
            window.setTimeout(function() {
                if( !done) {
                    done = !0;
                    if(cb) cb(s,1);
                }
            }, 5000);
            if(this.fScript===null) this.init();
            this.fScript.parentNode.insertBefore( s, this.fScript );
        },
        css : function(href,cb,attrs) {
            var l = document.createElement("link"),i;
            l.href = href;
            l.rel = "stylesheet";
            l.type = "text/css";
            for ( i in attrs ) {
                l.setAttribute( i, attrs[i]);
            }
            if(this.fScript===null) this.init();
            this.fScript.parentNode.insertBefore(l,this.fScript);
            if(cb) window.setTimeout(cb, 0);
        },
        init : function() {
            this.fScript = document.getElementsByTagName( "script" )[ 0 ];
        }
    };
    

    Usage

    CFLoad.js("http://code.jquery.com/jquery-1.8.3.js", function (script_tag, failed) {
        if(!failed) {
            CFLoad.js("http://code.jquery.com/ui/1.9.2/jquery-ui.js", function(s, f) {
                if(!f) {
                    alert("Loaded");
                    js13 = jQuery.noConflict(true);
                    main();
                }
            })
        }
    });
    

    In your case:

    CFLoad.js("playlistcontent.jsonp");