IE8动态创建script标签onload不工作?
JavaScript
2014-03-10
今天做项目,发现一个奇怪的问题,动态创建的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("http://code.jquery.com/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 http://code.jquery.com/jquery-1.11.0.min.js: loading test.js: complete From test.js http://code.jquery.com/jquery-1.11.0.min.js: loaded From jQuery
执行步骤为,这下类似于onload的功能算然算是找到了,但却有一个问题,它不是按顺序加载的,当jQuery文件loading的时候,test.js已经complete了,并且第一行就先执行了test.js的内容。因为test.js先于jQuery执行,所以才打出undefined。于是我们可以改写成这样,让它线性加载:
loadJs("http://code.jquery.com/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); loadJs("test.js", function(){ console.log("From test.js"); }); });
执行结果:
http://code.jquery.com/jquery-1.11.0.min.js: loading http://code.jquery.com/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("http://code.jquery.com/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); }); loadJs("test.js", function(){ console.log("From test.js"); });
执行结果的顺序,也不相同:
function http://code.jquery.com/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("http://code.jquery.com/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); });
执行结果也就不一样,类似顺序加载:
undefined test.js: loaded From test.js http://code.jquery.com/jquery-1.11.0.min.js: loaded From jQuery
文字链接:《IE8动态创建script标签onload不工作?》
文章地址:http://www.qttc.net/201403419.html
除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源
相关博文
换一组Comments 0
Hi,你想第一个做沙发么?
乳名?小名?昵称?网名?均可
email,放心,我不会给你乱投广告的
想获得回访就把你的站点URL写上(没有留空)
[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法