IE8中动态创建script标签onload无效的解决方法

前端之家收集整理的这篇文章主要介绍了IE8中动态创建script标签onload无效的解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了IE8中动态创建script标签onload无效的解决方法分享给大家供大家参考。具体分析如下:

今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。

代码如下:

代码如下:
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);


运行结果:
<div class="codetitle"><a style="CURSOR: pointer" data="92470" class="copybut" id="copybut92470" onclick="doCopy('code92470')"> 代码如下:
<div class="codebody" id="code92470">undefined // test.js运行时,jQuery还未加载

typeof jQuery // 从控制台上运行,却找到了jQuery对象,证明加载顺序问题
"function"


并且以上代码中script.onload并没有执行,明明代码已经加载进来了,为什么还是onload不执行呢?到网上一查发现众多前端开发人员都遇到这个棘手的问题,于是找到了一些替补方案,如下:
<div class="codetitle"><a style="CURSOR: pointer" data="70444" class="copybut" id="copybut70444" onclick="doCopy('code70444')"> 代码如下:
<div class="codebody" id="code70444">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);
};


执行结果:
<div class="codetitle"><a style="CURSOR: pointer" data="9965" class="copybut" id="copybut9965" onclick="doCopy('code9965')"> 代码如下:
<div class="codebody" id="code9965">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。于是我们可以改写成这样,让它线性加载:
<div class="codetitle"><a style="CURSOR: pointer" data="91402" class="copybut" id="copybut91402" onclick="doCopy('code91402')"> 代码如下:
<div class="codebody" id="code91402">loadJs("js/jquery-1.11.0.min.js",function(){

console.log("From jQuery");

loadJs("test.js",function(){
console.log("From test.js");
});
});
执行结果:
<div class="codetitle"><a style="CURSOR: pointer" data="73648" class="copybut" id="copybut73648" onclick="doCopy('code73648')"> 代码如下:<div class="codebody" id="code73648">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
这次,执行的顺序完全是按照我们预订的顺序来了,但以上代码看着很别扭,需要层层嵌套,于是又发现了这种写法:
<div class="codetitle"><a style="CURSOR: pointer" data="351" class="copybut" id="copybut351" onclick="doCopy('code351')"> 代码如下:<div class="codebody" id="code351">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 test.js");
});
执行结果的顺序,也不相同:
<div class="codetitle"><a style="CURSOR: pointer" data="20241" class="copybut" id="copybut20241" onclick="doCopy('code20241')"> 代码如下:<div class="codebody" id="code20241">function
js/jquery-1.11.0.min.js: loaded
From jQuery
test.js: loaded
From test.js
如果你改变一下加载顺序
<div class="codetitle"><a style="CURSOR: pointer" data="87129" class="copybut" id="copybut87129" onclick="doCopy('code87129')"> 代码如下:<div class="codebody" id="code87129">loadJs("test.js",function(){
console.log("From test.js");
});

loadJs("js/jquery-1.11.0.min.js",function(){
console.log("From jQuery");
});
执行结果也就不一样,类似顺序加载:
<div class="codetitle"><a style="CURSOR: pointer" data="86466" class="copybut" id="copybut86466" onclick="doCopy('code86466')"> 代码如下:<div class="codebody" id="code86466">undefined
test.js: loaded
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery

希望本文所述对大家的javascript程序设计有所帮助。

原文链接:https://www.f2er.com/js/56762.html
script创建动态动态动态无效无效无效标签标签标签解决方法

猜你在找的JavaScript相关文章