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', функция), но я думаю, что только окно имеет прослушиватель событий.

Может кто-нибудь сказать мне, как лучше всего работать в любом браузере?

Спасибо

EDIT

Я пытаюсь это сейчас, и это все еще не работает, оба:

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, он использует событие присоединения

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