Повесить событие load на ещё не отрендеренный элемент script в head?

Question

[Олег Торбасов]

Рассматривайте этот вопрос как чисто теоретический, пожалуйста. Если начать разбирать, зачем это мне понадобилось, или как можно обойтись иначе, мы уйдём далеко от интересующего меня момента в сторону уже удовлетворительно решённой задачи.

Итак. На HTML-странице внутри тега head имеются несколько тегов script. Когда выполняется подключенный через один из них код, можно получить ссылку на соответствующий элемент (ну, например, так, если в одну строчку:

var script = Array.prototype.slice.call(document.head.getElementsByTagName("script")).pop()

) и навесить на него обработчик события load (

script.addEventListener("onload", function(){...}, false)

), которое сработает после полного выполнения этого скрипта.

Вопрос: возможно ли путём какого-либо кода в данном скрипте обеспечить выполнение события load на последующих элементах script? Я имею в виду, на тех, которые рендерятся для тегов уже существующих на HTML-страницы (для динамически добавляемых-то всё тривиально).

Закавыка в том, что они ещё не отрендерены, то есть через DOM-модель до них ещё не добраться. Но, может быть, как-то возможно создать обработчик для момента, когда они окажутся отрендерены (но ещё не выполнены)? Надежда, что событие onload всплывает и может быть перехвачена на элементе head (который уже доступен), не оправдалась; не всплывает (по меньшей мере, в Firefox).

Да, атрибута onload у этих скриптов, разумеется, нет.

Интересует есть ли решение для Firefox или, на худой конец, хоть для какого-нибудь браузера.

Answer 1

[1nd1go]

Посмотрите как реализован .live в jQuery. Ну или используйте его.

Comments

[Олег Торбасов]

Я думаю, это Вам следует посмотреть, как реализован .live в jQuery. Потому что он работает на основе всплывания события, а событие load не всплывает, о чём я прямо написал в вопросе.

[1nd1go]

Ну я бы на вашем месте, еще раз почитал про .live, который теперь .on, и вашу постановку задачи. Откуда лично я сделал вывод, основываясь на:

выполнение события load на последующих элементах [...] которые рендерятся для тегов уже существующих на HTML-страницы

и

Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.

[1nd1go]

В смысле, что если элементы script уже в html коде, но еще не загружены их сорцы, они, имхо, все равно находятся через document.getElementsByTagName('script'). И вот на них уже можно навешиваться с .on да и вообще.

[Олег Торбасов]

Ваше имхо неверно. Я же об этом написал: когда выполняется скрипт, последующие ещё не отпарсены и через DOM недоступны, просто их элементы ещё не созданы.

Answer 2

[nur]

я бы советовал смотреть в сторону requirejs

Comments

[Олег Торбасов]

Зачем? Вы угадали, у меня работает аналог этой библиотеки, но ни он, ни она не решают описанного вопроса. Я же ясно написал: с динамически добавляемыми скриптами проблемы нет, вопрос в том, как отслеживать загрузку уже присутствующих на странице.

Answer 3

[pxx]

Приходит в голову такое решение:

console.log('Set interval');
var scriptOnLoadInterval = window.setInterval(attachOnLoads, 20);
function attachOnLoads() {
  $('script').each(function() {
    var script = $(this);
    if (!script.data('onload-attached')) {
      script.data('onload-attached', true).one('load', onloadHandler);
    }
  });
};
function onloadHandler() { console.log( $(this).attr('src') ); };

$(function() {
  window.clearInterval(scriptOnLoadInterval);
  console.log('Clear interval');
});

Суть в том, чтобы как можно раньше зарегистрировать интервальное событие с как можно меньшим таймингом и в этом событии пробегать по скриптам и к вновь появившимся навешивать onload. На document.ready интервал можно смело развоплощать.
Нужно поиграться с самим интервалом, чтобы он был достаточно маленьким, чтобы отслеживать появление скриптов, но при этом успевал отработать и не убивал производительность. И тем не менее, потенциально могут быть несрабатывания, нужно играться и смотреть.