O
O
Oleg Torbasov2012-08-24 10:10:34
JavaScript
Oleg Torbasov, 2012-08-24 10:10:34

Hang a load event on a not-yet-rendered script element in the head?

Treat this question as purely theoretical, please. If we begin to analyze why I needed this, or how it could be done differently, we will go far from the point of interest to me in the direction of an already satisfactorily solved problem.
So. On an HTML page, headthere are several tags within a tag script. When the code connected through one of them is executed, you can get a link to the corresponding element (well, for example, if in one line:

var script = Array.prototype.slice.call(document.head.getElementsByTagName("script")).pop()
) and attach an event handler to it load(
script.addEventListener("onload", function(){...}, false)
), which will work after the full execution of this script.
Question: is it possible by any code in this script to ensure that the event is executed loadon subsequent elements script? I mean, those that are rendered for tags that already exist on HTML pages (everything is trivial for dynamically added ones).
The catch is that they have not yet been rendered, that is, they cannot be reached through the DOM model yet. But maybe it's somehow possible to create a handler for the moment when they are rendered (but not executed yet)? The hope that the onload event bubbles up and can be caught on an element head(which is already accessible) is not justified; does not pop up (at least in Firefox).
Yes, onloadthese scripts, of course, do not have an attribute.
Whether interests there is a decision for Firefox or, at the worst, though for any browser.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
1
1nd1go, 2012-08-24
@1nd1go

See how .live is implemented in jQuery. Well, or use it.

N
nur, 2012-08-24
@nur

I would advise looking towards requirejs

P
pxx, 2012-08-27
@pxx

A solution comes to mind:

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

The bottom line is to register an interval event as early as possible with as little timing as possible and run through the scripts in this event and hang onload to the newly appeared ones. On document.ready, the interval can be safely disembodied.
You need to play around with the interval itself, so that it is small enough to track the appearance of scripts, but at the same time manage to work out and not kill performance. And yet, there may potentially be failures, you need to play and watch.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question