本文實例講述了IE8中動態創建script標簽onload無效的解決方法。分享給大家供大家參考。具體分析如下：
今天做項目，發現一個奇怪的問題，動態創建的script標簽在IE8下無法觸發onload事件。
代碼如下：
復制代碼代碼如下:
var loadJs = function(src, fun){
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onload = fun;
}
document.getElementsByTagName("head")[0].appendChild(script);
};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
loadJs("test.js", function(){
console.log("From test.js");
});
test.js：
console.log(typeof jQuery);
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onload = fun;
}
document.getElementsByTagName("head")[0].appendChild(script);
};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
loadJs("test.js", function(){
console.log("From test.js");
});
test.js：
console.log(typeof jQuery);
運行結果：
復制代碼代碼如下:
undefined // test.js運行時，jQuery還未加載
>> typeof jQuery // 從控制臺上運行，卻找到了jQuery對象，證明加載順序問題
"function"
>> typeof jQuery // 從控制臺上運行，卻找到了jQuery對象，證明加載順序問題
"function"
并且以上代碼中script.onload并沒有執行，明明代碼已經加載進來了，為什么還是onload不執行呢？到網上一查發現眾多前端開發人員都遇到這個棘手的問題，于是找到了一些替補方案，如下：
復制代碼代碼如下:
var loadJs = function(src, fun){
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function() {
var r = script.readyState;
console.log(src + ": " + r);
if (r === 'loaded' || r === 'complete') {
script.onreadystatechange = null;
fun();
}
};
}
document.getElementsByTagName("head")[0].appendChild(script);
};
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function() {
var r = script.readyState;
console.log(src + ": " + r);
if (r === 'loaded' || r === 'complete') {
script.onreadystatechange = null;
fun();
}
};
}
document.getElementsByTagName("head")[0].appendChild(script);
};
執行結果：
復制代碼代碼如下:
undefined
js/jquery-1.11.0.min.js: loading
test.js: complete
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
js/jquery-1.11.0.min.js: loading
test.js: complete
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
執行步驟為，這下類似于onload的功能算然算是找到了，但卻有一個問題，它不是按順序加載的，當jQuery文件loading的時候，test.js已經complete了，并且第一行就先執行了test.js的內容。因為test.js先于jQuery執行，所以才打出undefined。于是我們可以改寫成這樣，讓它線性加載：
復制代碼代碼如下:
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
loadJs("test.js", function(){
console.log("From test.js");
});
});
console.log("From jQuery");
loadJs("test.js", function(){
console.log("From test.js");
});
});
執行結果：
復制代碼代碼如下:
js/jquery-1.11.0.min.js: loading
js/jquery-1.11.0.min.js: loaded
From jQuery
function
test.js: complete
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
function
test.js: complete
From test.js
這次，執行的順序完全是按照我們預訂的順序來了，但以上代碼看著很別扭，需要層層嵌套，于是又發現了這種寫法：
復制代碼代碼如下:
var loadJs = function(src, fun){
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function() {
var r = script.readyState;
console.log(src + ": " + r);
if (r === 'loaded' || r === 'complete') {
script.onreadystatechange = null;
fun();
}
};
}
document.write(script.outerHTML);
//document.getElementsByTagName("head")[0].appendChild(script);
};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
loadJs("test.js", function(){
console.log("From test.js");
});
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function() {
var r = script.readyState;
console.log(src + ": " + r);
if (r === 'loaded' || r === 'complete') {
script.onreadystatechange = null;
fun();
}
};
}
document.write(script.outerHTML);
//document.getElementsByTagName("head")[0].appendChild(script);
};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
loadJs("test.js", function(){
console.log("From test.js");
});
執行結果的順序，也不相同：
復制代碼代碼如下:
function
js/jquery-1.11.0.min.js: loaded
From jQuery
test.js: loaded
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
test.js: loaded
From test.js
如果你改變一下加載順序
復制代碼代碼如下:
loadJs("test.js", function(){
console.log("From test.js");
});
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
console.log("From test.js");
});
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
執行結果也就不一樣，類似順序加載：
復制代碼代碼如下:
undefined
test.js: loaded
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
test.js: loaded
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
希望本文所述對大家的javascript程序設計有所幫助。
