快捷導(dǎo)航

javascript loadScript異步加載腳本示例講解

更新時(shí)間：2013年11月14日 16:28:50 作者：

本文講解了javascript異步加載腳本并觸發(fā)回調(diào)函數(shù)的方法，在加載遠(yuǎn)程數(shù)據(jù)的時(shí)候可以用到，下面提供代碼示例和源碼

一、語(yǔ)法:
loadScript(url[,callback])
或者
loadScript(settings)
二、settings支持的參數(shù):
url:腳本路徑
async:是否異步，默認(rèn)false(HTML5)
charset:文件編碼
cache:是否緩存，默認(rèn)為true
success:加載成功后執(zhí)行的函數(shù)，優(yōu)先執(zhí)行callback。
三、調(diào)用舉例:

復(fù)制代碼代碼如下:

//loadScript(url[,callback])
loadScript(“http://code.jquery.com/jquery.js”);
loadScript(“http://code.jquery.com/jquery.js”,function(){
console.log(1)
});
//loadScript(settings)
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”cache”:false});
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”success”:function(){
console.log(2)
}});
//或者你可以醬紫：
//loadScript(settings[,callback])
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″},function(){
console.log($)
});

四、源代碼:

復(fù)制代碼代碼如下:

function loadScript(url,callback) {
var head = document.head || document.getElementsByTagName(“head”)[0] || document.documentElement,
script,
options,

if (typeof url === “object”) {
options = url;
url = undefined;
}
s = options || {};
url = url || s.url;
callback = callback || s.success;
script = document.createElement(“script”);
script.async = s.async || false;
script.type = “text/javascript”;
if (s.charset) {
script.charset = s.charset;
}
if(s.cache === false){
url = url+( /\?/.test( url ) ? “&” : “?” )+ “_=” +(new Date()).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
if(callback){
document.addEventListener ? script.addEventListener(“l(fā)oad”, callback, false) : script.onreadystatechange = function() {
if (/loaded|complete/.test(script.readyState)) {
script.onreadystatechange = null
callback()
}
}
}
}