Object.onload在Internet Explorer 6，7和8

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

我喜欢你如何附加加载事件后，你将其添加到页面。有点像打开门后敲门铃。

的addEventListener在早期版本的Internet Explorer不能正常工作，它使用附加事件

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

但仍然会失败，并在IE旧版本，你需要使用的onreadystatechange像Ajax调用。

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); 
} 

Answer 2

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 3

我发现的readyState被设置为“加载”为IE8（IE11在兼容模式下），所以你需要满足两个值（”完成'），虽然我还没有看到在IE中返回的其他值（谢谢@chjj）。
下面实现了一个单独的回调函数，可以同时处理'已加载'的事件，也许它是有用的。

function loadScript(url, callback) { 
    var head = document.head || document.getElementsByTagName("head")[0]; 
    var scriptElement = document.createElement("script"); 
    scriptElement.type = "text/javascript"; 
    scriptElement.src = url; 

    var singletonCallback = (function() { 
     var handled = false; 
     return function() { 
      if (handled) { 
       return; 
      } 
      handled = true; 
      if (typeof (callback) === "function") { 
       callback(); 
      } 
      if (debugEnabled) { 
       log("Callback executed for script load task: " + url); 
      } 
     }; 
    }()); 
    scriptElement.onreadystatechange = function() { 
     if (this.readyState === 'complete' || this.readyState === 'loaded') { 
      singletonCallback(); 
     } 
    }; 
    scriptElement.onload = singletonCallback; 

    if (debugEnabled) { 
     log("Added scriptlink to DOM: " + url); 
    } 

    head.appendChild(scriptElement); 
}