Internet Explorer 6,7和8中的Object.onload

Question

我有一个必须能够执行以下操作的应用程序:

var script1 = document.createElement('script');
script1.src = myLocation + 'script1.js';
script1.type = 'text/javascript';
document.body.appendChild(script1);

script1.addEventListener('load', function () {
    var script2 = document.createElement('script');
    script2.src = myLocation + 'script2.js';
    script2.type = 'text/javascript';
    document.body.appendChild(script2);

    script2.addEventListener('load', function () {
        var script3 = document.createElement('script');
        script3.src = myLocation + 'script3.js';
        script3.type = 'text/javascript';
        document.body.appendChild(script3);
    }, false);
}, false);

这完全适用于所有浏览器,即使在IE9中也是如此.在其他每一个IE中,它都没有.我试过回到Object.attachEvent('onload',函数),但我认为只有窗口有该事件监听器.

谁能告诉我在每个浏览器中工作的最佳方法是什么？

谢谢

编辑

我现在正在尝试这个,它仍然不起作用,他们两个:

var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
script.type = 'text/javascript';
script.onload = function(){alert('jquery loaded');};
//script.attachEvent('load', function(){alert('jquery loaded');});
document.body.appendChild(script);

Answer 1

您可能已经猜到,Internet Explorer的工作方式略有不同.而不是onload一个onreadystatechange事件将会触发.然后,您可以检查readyState属性,它可以是几个不同的值之一.你应该检查complete或loaded.它们之间存在轻微的语义差异,我不记得了,但有时它会是loaded,有时会是complete.

而且由于您可能不必担心其他代码绑定到此元素,因此您可以使用DOM 1级事件接口:

script.onreadystatechange = function() {
  var r = script.readyState;
  if (r === 'loaded' || r === 'complete') {
    doThings();
    script.onreadystatechange = null;
  }
};

(或者你可以使用上面的正则表达式,如果你很懒.)

Answer 2

我喜欢在您将加载事件添加到页面后附加加载事件的方式.有点像打开门后敲响门铃.

addEventListener在早期版本的Internet Explorer中不起作用,它使用attach事件

if (script1.addEventListener){
  script1.addEventListener('load', yourFunction);
} else if (script1.attachEvent){
  script1.attachEvent('onload', yourFunction);
}

但是在IE上使用旧版本仍然会失败,你需要在Ajax调用中使用onreadystatechange.

script1.onreadystatechange= function () {
   if (this.readyState == 'complete') yourFunction();
}

所以像这样:

function addScript(fileSrc, helperFnc)
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.onreadystatechange = function () {
      if (this.readyState == 'complete') helperFnc();
   }
   script.onload = helperFnc;
   script.src = fileSrc;
   head.appendChild(script);
}