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'， function)，但我认为只有window拥有该事件监听器。

有人能告诉我在每个浏览器中最好的方法是什么吗？

编辑

我正在尝试这个，但它仍然不起作用，两个都不行：

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

- André Alçada Padez

---

也许这篇帖子可以帮到你：https://dev59.com/0ljUa4cB1Zd3GeqPVeF-#13031185 - czerasz

Answer 1

正如你所猜测的那样，Internet Explorer 有些不同。它不是使用 onload 事件，而是使用 onreadystatechange 事件。然后你可以检查 readyState 属性，它可以是几个不同的值之一。你应该检查 complete 或者 loaded。它们之间有一点语义上的不同，我记不清了，但有时会是 loaded，有时会是 complete。

而且由于你可能不需要担心其他代码绑定到该元素，所以可以直接使用 DOM level 1 事件接口：

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

（如果你懒得做，也可以使用正则表达式。）

- chjj

Answer 2

我喜欢你在将事件添加到页面后再附加加载事件的方法。有点像打开门后按门铃。

addEventListener在早期版本的Internet Explorer中无法使用，需要使用attachEvent。

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

- epascarello

Answer 3

我发现在IE8（兼容模式下的IE11）中，readyState被设置为“loaded”，因此您需要考虑这两个值（“completed”），尽管我没有在IE中看到返回此其他值（感谢@chjj）。
以下实现了一个单例回调，可以处理两个“loaded”事件，也许它会有用。

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

- Nicholas