Question

Background

I’m developing a bookmarklet which has dependencies on 3rd party libraries to be loaded into the DOM before my bookmarklet script can run. The heart of the problem I’m having is this dependency chain that I need to wait for before I can react, and I’m having issues getting it to fly in IE.

I cannot be sure JQuery is even on the page at this stage. It’s something I check, and if it isn’t there, then I have to create and inject this into the DOM.

The flow of control is something like this:

1. Load main library (jquery) into the DOM, I’ve attached an event listener to pick up on when it’s actually in the DOM.

   var e = document.createElement('script');
   e.type = 'text/javascript';
   e.src = http:// ... jquerylibrary.js
   e.addEventListener('load', callback);
   

2. Setup the callback function

   var callback = function() {
       //my stuff that wants to use jquery
   }
   

This works, and it works well. I can chain jquery, some jquery plugins, then my code, and then I can be sure when my code runs (in real browser land) that it’ll run.

The Crux of the problem

When IE > 9 (Which we must support) has a similar function … attachEvent('onload',callback);

Thing that’s similar, but doesn’t appear to fire correctly when DOM elements are updated. Looking through MSDN’s long list of events, it’s not clear if any of those events are what I’m looking for.

What event does IE 7+ fire when the DOM is updated?

Answer 1

I’ve figured it out after reading some of the source of head.js. This calls for a bit of creative javascript magic.

The events we’re interested in are onreadystatechange, and onload. You can attach a custom function to these to trigger update notifications when they insert into the page.

I’ve abstracted this into a function, where, if you pass it an element and a callback statement, it’ll dump the element at the end of the page body and run the callback.

function loadElement(e, callback) {
    if ( typeof(callback) === 'function' ) { 
        e.onreadystatechange = e.onload = function() {
            var state = e.readyState;

            if ( !callback.done && (!state || /loaded|complete/.test(state)) ) { 
                callback.done = true;
                callback();
            }   
        }   
    }   
    document.body.appendChild(e);
}

Though I’ve posted this answer to my problem, I’m interested in alternative approaches to this :).