Почему не срабатывает onreadystatechange и readyState при динамическом подключении скриптов?

Question

[Ао]

Не пойму, везде примеры с динамическим подключением скриптов типа такого:

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery.js";
document.documentElement.appendChild(script);

function afterLoad() {
  alert( "Загрузка завершена: " + typeof(jQuery) );
}

script.onload = script.onerror = function() {
  if (!this.executed) { // выполнится только один раз
    this.executed = true;
    afterLoad();
  }
};

script.onreadystatechange = function() {
  var self = this;
  if (this.readyState == "complete" || this.readyState == "loaded") {
    setTimeout(function() {
      self.onload()
    }, 0); // сохранить "this" для onload
  }
};

Но у script нет ни onreadystatechange , ни readyState и как следствие функция выше не отработает как задумано.

И Второй вопрос хочу подключить несколько сриптов в цикле

var jsArr=['js1.js', 'js2.js'];
      var script=[]
                    for (var jsFile in jsArr) {

                       var script[jsFile ] = document.createElement('script');
                       script[jsFile ].src = "/static/js/"+jsArr[jsFile];                
                       document.body.appendChild(script[jsFile ]);

                        script[jsFile].onload = function() {
                            console.log(script[jsFile]); // оба раза покажет только последний файл
                           console.log(script);
                        };
                        script[jsFile].onerror = function() {
                            alert( "Ошибка: " + this.src );
                        };
                    }

И получается так что оба раза после загрузки скриптов console.log(script[jsFile]); показывает что отработала функция для последнего загруженного файла. Почему так ?

Answer 1

[cryogenian]

Редистейт для восьмого ие, в статье, откуда вы примеры скопировали, это написано. Проверьте, что у элемента есть это свойство, а потом используйте. Кстати, сначала регистрируют обработчик, а потом устанавливают срц.
Форлуп не формирует области видимости для переменных определённых варами, значения передаются по ссылке - - конечно, у вас все лисенеры будут с последним значением вызываться. Почитайте про замыкания.

Comments

[Ао]

Редистейт для восьмого ие, в статье, откуда вы примеры скопировали, это написано.

А понял, не обратил внимание что это только для IE8 , там ниже крос браузерное решение.. ну и не вник до конца, сижу не могу вдуплить :)))

Кстати, сначала регистрируют обработчик, а потом устанавливают срц.

Да встречал такой совет, но разницы не увидел.

но я же обработчик onload навесил на конкретный элемент - разве нет ? Точнее на каждый элемент свой обработчик onload?
нужно понять же почему так работает:)
var не могу поменять на let т.к. нужна поддержка FF30+ а он ругается на let

[cryogenian]

Не, script[jsFile] не тот, потому что jsFile не тот. Foreach можно использовать на массиве. Там будет работать.

Обработчик может не сработать, если сеть и комп быстрые. Так что лучше ставить обработку сначала.

[Ао]

cryogenian, Краткость сестра таланта :) Ниче не понятно :)

Answer 2

[Ао]

cryogenian
Так надо сделать ?

var jsArr=['js1.js', 'js2.js'];
   
                    for (var jsFile in jsArr) {

                       var script = document.createElement('script');
                       script.src = "/static/js/"+jsArr[jsFile];                
                       document.body.appendChild(script[jsFile ]);
                        (function(script) {
                               return script.onload = function() {
                                    console.log(script);                              
                               };
                           })(script);
                       
                    }

Comments

[cryogenian]

jsArr.forEach(function(x) { здесь код который раньше был в цикле})