方法一，jQuery.getScript

HTML 代碼：

代碼如下 復制代碼
<button id="go">Run</button>
<div class="block"></div>

jQuery 代碼：

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});

方法三

?

代碼如下 復制代碼
同步加載，單步加載，引入js內容可以直接使用
var Skip={};
//獲取XMLHttpRequest對象(提供客戶端同http服務器通訊的協議)
Skip.getXmlHttpRequest=function (){
if ( window.XMLHttpRequest ) // 除了IE外的其它瀏覽器
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
},
//導入內容
Skip.includeJsText =function (rootObject,jsText){
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
//oScript.id = sId;
//oScript.src = fileUrl;
//oScript.defer = true;
oScript.text = jsText;
rootObject.appendChild(oScript);
//alert(oScript.text);
}
},
//導入文件
Skip.includeJsSrc =function (rootObject, fileUrl){
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
oScript.src = fileUrl;
rootObject.appendChild(oScript);
}
},
//同步加載
Skip.addJs=function(rootObject, url){
var oXmlHttp = Skip.getXmlHttpRequest() ;
oXmlHttp.onreadystatechange = function(){//其實當在第二次調用導入js時,因為在瀏覽器當中存在這個*.js文件了,它就不在訪問服務器,也就不在執行這個方法了,這個方法也只有設置成異步時才用到
if ( oXmlHttp.readyState == 4 ){ // www.111cn.net 當執行完成以后(返回了響應)所要執行的
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有讀取對應的url文件,404表示不存在這個文件
Skip.includeJsSrc( rootObject, url);
} else{
alert( 'XML(www.111cn.net) request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
}
}
}
//1.True 表示腳本會在 send() 方法之后繼續執行，而不等待來自服務器的響應,并且在open()方法當中有調用到onreadystatechange()這個方法。通過把該參數設置為 "false"，可以省去額外的 onreadystatechange 代碼,它表示服務器返回響應后才執行send()后面的方法.
//2.同步執行oXmlHttp.send()方法后oXmlHttp.responseText有返回對應的內容,而異步還是為空,只有在oXmlHttp.readyState == 4時才有內容,反正同步的在oXmlHttp.send()后的操作就相當于oXmlHttp.readyState == 4下的操作,它相當于只有了這一種狀態.
oXmlHttp.open('GET', url, false); //url為js文件時,ie會自動生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不會
oXmlHttp.send(null);
Skip.includeJsText(rootObject,oXmlHttp.responseText);
}
};
var rootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
test();//即使馬上調用也不會出錯了.
</script>

方法三，自己用的加載js文件,支持多文件,不兼容ie

代碼如下 復制代碼

/**
* 加載js文件
* @param {string || array} url js路徑
* @param {Function} fn 加載完成后回調
* @return {object} game對象
* @example
* getScript("url.js",fn)
* getScript(["url-1.js","url-2.js"],fn)
*/
game.getScript = (function() {
var cache = {};//內部緩存下url,下次則不請求
return function(url, fn) {
if ("string" === typeof(url)) {
url = [url]; //如果不是數組帶個套
};
var i = 0,//循環起
ok = 0,//加載成功幾個js
len = url.length,//一共幾個js
head = document.getElementsByTagName("head")[0],
js, _url,
create = function(url) {//創建js
js = document.createElement("script");
js.type = "text/javascript";
js.src = url;
head.appendChild(js);
return js;
};
for (; i < len;) {
if (cache[encodeURIComponent((_url = url[i++]))]) {//如果加載過
(++ok >= len && fn) && fn();//如果加載完所有的js則執行回調
continue;
}
cache[encodeURIComponent(_url)] = !0;//設置緩存
js = create(_url);//創建js
fn && (js.onload = function() {
if (++ok >= len) {//如果加載完所有的js則執行回調
fn();
}
});
};
head = js = _url = create = null;
return this;
}
})();

from:http://www.111cn.net/wy/js-ajax/58715.htm

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的异步加载js文件的方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。