IE8中動態建立script標籤onload無效的解決方法_javascript技巧

本文實例講述了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);

運行結果：

複製程式碼 程式碼如下:

undefined  // test.js執行時間，jQuery尚未載入時，jQuery還未載入🎜> >> 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);
};

執行結果：

複製程式碼 程式碼如下:

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

執行步驟為，這下類似於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");         
    });       
});

執行結果：

複製程式碼 程式碼如下:

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

這次，執行的順序完全是按照我們預訂的順序來了，但以上代碼看著很彆扭，需要層層嵌套，於是又發現了這種寫法：

複製程式碼 程式碼如下:

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");         
});

執行結果的順序，也不相同：

複製程式碼 程式碼如下:

function
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"); 
});

執行結果也就不一樣，類似順序載入：

複製程式碼 程式碼如下:

undefined 
test.js: loaded 
From test.js 
js/jquery-1.11.0.min.js: loaded 
From jQuery

希望本文所述對大家的javascript程式設計有所幫助。