IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無(wú)效的解決方法
更新時(shí)間：2014年12月22日 09:43:53 投稿：shichen2014
這篇文章主要介紹了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無(wú)效的解決方法,涉及針對(duì)javascript加載順序的調(diào)整,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了IE8中動(dòng)態(tài)創(chuàng)建script標(biāo)簽onload無(wú)效的解決方法。分享給大家供大家參考。具體分析如下：
今天做項(xiàng)目，發(fā)現(xiàn)一個(gè)奇怪的問(wèn)題，動(dòng)態(tài)創(chuàng)建的script標(biāo)簽在IE8下無(wú)法觸發(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);
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對(duì)象，證明加載順序問(wèn)題
"function"
>> typeof jQuery // 從控制臺(tái)上運(yùn)行，卻找到了jQuery對(duì)象，證明加載順序問(wèn)題
"function"
并且以上代碼中script.onload并沒(méi)有執(zhí)行，明明代碼已經(jīng)加載進(jìn)來(lái)了，為什么還是onload不執(zhí)行呢？到網(wǎng)上一查發(fā)現(xiàn)眾多前端開(kāi)發(fā)人員都遇到這個(gè)棘手的問(wèn)題，于是找到了一些替補(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);
};
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
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í)行步驟為，這下類(lèi)似于onload的功能算然算是找到了，但卻有一個(gè)問(wèn)題，它不是按順序加載的，當(dāng)jQuery文件loading的時(shí)候，test.js已經(jīng)complete了，并且第一行就先執(zhí)行了test.js的內(nèi)容。因?yàn)閠est.js先于jQuery執(zhí)行，所以才打出undefined。于是我們可以改寫(xiě)成這樣，讓它線性加載：
復(fù)制代碼 代碼如下:
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");
});
});
執(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
js/jquery-1.11.0.min.js: loaded
From jQuery
function
test.js: complete
From test.js
這次，執(zhí)行的順序完全是按照我們預(yù)訂的順序來(lái)了，但以上代碼看著很別扭，需要層層嵌套，于是又發(fā)現(xiàn)了這種寫(xiě)法：
復(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");
});
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
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");
});
console.log("From test.js");
});
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
執(zhí)行結(jié)果也就不一樣，類(lèi)似順序加載：
復(fù)制代碼 代碼如下:
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
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽
- 動(dòng)態(tài)創(chuàng)建script標(biāo)簽實(shí)現(xiàn)跨域資源訪問(wèn)的方法介紹
- Script標(biāo)簽與訪問(wèn)HTML頁(yè)面詳解
- javascript標(biāo)簽在頁(yè)面中的位置探討
- script標(biāo)簽屬性type與language使用選擇
- script標(biāo)簽的 charset 屬性使用說(shuō)明
- javascript 獲取url參數(shù)和script標(biāo)簽中獲取url參數(shù)函數(shù)代碼
- asp.net(C#) 動(dòng)態(tài)添加非ASP的標(biāo)準(zhǔn)html控件（如添加Script標(biāo)簽）
- 有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧
- 淺談js script標(biāo)簽中的預(yù)解析
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)單選框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了微信外喚起微信小程序的方法,結(jié)合實(shí)例形式詳細(xì)分析了微信外喚起微信小程序的相關(guān)步驟、原理與操作注意事項(xiàng),需要的朋友可以參考下2023-07-07
在網(wǎng)頁(yè)開(kāi)發(fā)中我們通常使用CSS來(lái)設(shè)置網(wǎng)頁(yè)的樣式,但是,在開(kāi)發(fā)過(guò)程中,有時(shí)候我們需要根據(jù)不同的條件來(lái)動(dòng)態(tài)修改樣式,這篇文章主要介紹了通過(guò)js控制修改css變量的具體示例,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了詳解webpack 最簡(jiǎn)打包結(jié)果分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
uniapp實(shí)現(xiàn)app檢查更新與升級(jí)詳解(uni-upgrade-center)
UniApp是一個(gè)跨平臺(tái)的開(kāi)發(fā)框架,可以同時(shí)開(kāi)發(fā)iOS和Android應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app檢查更新與升級(jí)(uni-upgrade-center)的相關(guān)資料,需要的朋友可以參考下2023-11-11
如何在現(xiàn)代JavaScript中編寫(xiě)異步任務(wù)
這篇文章主要給大家介紹了關(guān)于如何在現(xiàn)代JavaScript中編寫(xiě)異步任務(wù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本文通過(guò)代碼實(shí)例詳解js字符串刪除重復(fù)字符的方法，代碼簡(jiǎn)單易懂，特此分享供大家參考2015-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的秒表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript實(shí)現(xiàn)快速排序的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)快速排序的方法,結(jié)合實(shí)例形式分析了快速排序的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-01-01
這篇文章主要給大家介紹了關(guān)于ES6的異步終極解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07