jQuery Alternate Source in HTML

概述For better site performance, we may use popular libraries from CDN like Google Hosted Libraries.&ltscript src="//ajax.googleapis.com/ajax/libs/jquery/2.

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⑵.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="@R_419_6822@://www.wfuyu.com/upload@R_419_6852@/cj/20150502/'+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="@R_419_6822@://www.wfuyu.com/upload@R_419_6852@/cj/20150502/'+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>

本文来自@R_419_6822@://blog.csdn.net/flashdelover/article/details/45421109
未经允许，不准转载

总结

以上是内存溢出为你收集整理的jQuery Alternate Source in HTML全部内容，希望文章能够帮你解决jQuery Alternate Source in HTML所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。