欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法

 更新時(shí)間：2014年12月22日 09:43:53   投稿：shichen2014  
這篇文章主要介紹了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法,涉及針對javascript加載順序的調(diào)整,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無效的解決方法。分享給大家供大家參考。具體分析如下：

今天做項(xiàng)目，發(fā)現(xiàn)一個(gè)奇怪的問題，動(dòng)態(tài)創(chuàng)建的script標(biāo)簽在IE8下無法觸發(fā)onload事件。

代碼如下：

復(fù)制代碼 代碼如下:
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);

運(yùn)行結(jié)果：
復(fù)制代碼 代碼如下:
undefined  // test.js運(yùn)行時(shí)，jQuery還未加載
>> typeof jQuery  // 從控制臺(tái)上運(yùn)行，卻找到了jQuery對象，證明加載順序問題
"function"

并且以上代碼中script.onload并沒有執(zhí)行，明明代碼已經(jīng)加載進(jìn)來了，為什么還是onload不執(zhí)行呢？到網(wǎng)上一查發(fā)現(xiàn)眾多前端開發(fā)人員都遇到這個(gè)棘手的問題，于是找到了一些替補(bǔ)方案，如下：
復(fù)制代碼 代碼如下:
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);
};

執(zhí)行結(jié)果：
復(fù)制代碼 代碼如下:
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

執(zhí)行步驟為，這下類似于onload的功能算然算是找到了，但卻有一個(gè)問題，它不是按順序加載的，當(dāng)jQuery文件loading的時(shí)候，test.js已經(jīng)complete了，并且第一行就先執(zhí)行了test.js的內(nèi)容。因?yàn)閠est.js先于jQuery執(zhí)行，所以才打出undefined。于是我們可以改寫成這樣，讓它線性加載：
復(fù)制代碼 代碼如下:
loadJs("js/jquery-1.11.0.min.js", function(){
 
    console.log("From jQuery"); 
 
    loadJs("test.js", function(){
        console.log("From test.js");         
    });       
});

執(zhí)行結(jié)果：
復(fù)制代碼 代碼如下:
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

這次，執(zhí)行的順序完全是按照我們預(yù)訂的順序來了，但以上代碼看著很別扭，需要層層嵌套，于是又發(fā)現(xiàn)了這種寫法：
復(fù)制代碼 代碼如下:
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");         
});

執(zhí)行結(jié)果的順序，也不相同：
復(fù)制代碼 代碼如下:
function
js/jquery-1.11.0.min.js: loaded 
From jQuery 
test.js: loaded 
From test.js

如果你改變一下加載順序
復(fù)制代碼 代碼如下:
loadJs("test.js", function(){
    console.log("From test.js");         
});
 
loadJs("js/jquery-1.11.0.min.js", function(){
    console.log("From jQuery"); 
});

執(zhí)行結(jié)果也就不一樣，類似順序加載：
復(fù)制代碼 代碼如下:
undefined 
test.js: loaded 
From test.js 
js/jquery-1.11.0.min.js: loaded 
From jQuery

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論