DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> IE8中動態創建script標簽onload無效的解決方法
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還未加載
>> 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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved