jQuery Alternate Source in HTML

For better site performance, we may use popular libraries from CDN like Google Hosted Libraries.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

That's good. But sometimes, a storm may arise from a clear sky, the script may not be accessible. To save against a rainy day, an alternative source should be ready.

<script name="jQuery" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" data-alt-src="//code.jquery.com/jquery-2.1.3.min.js"></script>

and with the following snippet, got it.

<script title="script-alt 1.0">
if(!window.jQuery){
    document.write('<script name="jQueryAlt" src="'+document.scripts.namedItem("jQuery").getAttribute("data-alt-src")+'"><'+'/script>');
}
</script>

Note that if you want to use jQuery API directly, use document.write() rather than appendChild call like document.body.appendChild() to add a script element to document. for the appendChild call, its related loading is asynchronous in Chrome.

To replace the error script element with alternative script element when jQuery loading failed, this works:

<script title="script-alt 1.1">
(function(){
    if(!window.jQuery){
        var script=document.scripts.namedItem("jQuery");
        document.write('<script name="jQueryAlt" src="'+script.getAttribute("data-alt-src")+'"><'+'/script>');
        script.parentElement.replaceChild(document.scripts.namedItem("jQueryAlt"),script);
    }
}());
</script>

To let the alternative script element not be tagged with "jQueryAlt", one solution:

<script title="script-alt 1.2">
(function(){
    if(!window.jQuery){
        var script=document.scripts.namedItem("jQuery");
        script.src=script.getAttribute("data-alt-src");
        document.write(script.outerHTML);
        var lastItem=function(){return this.item(this.length-1);};
        script.parentElement.replaceChild(lastItem.call(document.scripts),script);
    }
}());
</script>

To make it modular, we got

<script title="script-alt 1.3">
(function(){
    function lastItem(){
        return this.item(this.length-1);
    }
    function setSrc(src){
        this.src=src;
        if(document.readyState=="complete"){this.outerHTML=this.outerHTML;return;}
        document.write(script.outerHTML);
        this.parentElement.replaceChild(lastItem.call(document.scripts),script);
    }
    if(!window.jQuery){
        var script=document.scripts.namedItem("jQuery");
        setSrc.call(script,script.getAttribute("data-alt-src"));
    }
}());
</script>

If you have your own host with SSL support, and its resources are located at the the same path as these in Google Hosted Libraries, then the only difference between your own host and Google Hosted Libraries is host. In these circumstances, you just need to specify an alternative source host.

<script name="jQuery" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" data-alt-host="ajax.myapis.com"></script>

and with the following script, alternative source may work.

<script title="script-alt 2.0">
(function(){
    function DocumentBasedURL(url){
        var a=document.createElement("a");
        a.href=url;
        return a;
    }
    function lastItem(){
        return this.item(this.length-1);
    }
    function setSrc(src){
        this.src=src;
        if(document.readyState=="complete"){this.outerHTML=this.outerHTML;return;}
        document.write(script.outerHTML);
        this.parentElement.replaceChild(lastItem.call(document.scripts),script);
    }
    if(!window.jQuery){
        var script=document.scripts.namedItem("jQuery");
        var url=new DocumentBasedURL(script.src);
        url.host=script.getAttribute("data-alt-host");
        setSrc.call(script,url.href);
    }
}());
</script>

Finally, jQuery API can be called to do what you want.

<script>
jQuery(function($){
    console.log("jQuery "+$.fn.jquery+" loaded");
});
</script>

本文來自http://blog.csdn.net/flashdelover/article/details/45421109
未經允許，不準轉載