Hot For Coding

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('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 

看来问题就出现在document.getElementsByTagName("head")[0].appendChild(script)这句代码上,需要改写成document.write(script.outerHTML)

TITLE: IE8动态创建script标签onload不工作

LINK: https://www.qttc.net/419_ie8_onload_on_script_tag.html

NOTE: 转载内容请注明出处