本文实例讲述了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"
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
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程序设计有所帮助。