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