Question

I have an application that must be able to do the following:

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

This totally works in every browser, even in IE9. In every other IE, it doesn’t. I have tried falling back to Object.attachEvent('onload', function) but I think only window has that event listener.

Can anyone tell me what is the best way for this to work in every browser?

EDIT

I am trying this now, and it still doesn’t work, both of them:

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

I like how you attach the load event AFTER you add it to the page. Sort of like ringing the doorbell after you open the door.

addEventListener does not work in earlier versions of Internet Explorer, it uses attach event

if (script1.addEventListener){
  script1.addEventListener('load', yourFunction);
} else if (script1.attachEvent){
  script1.attachEvent('onload', yourFunction);
}

but that is still going to fail with older versions on IE, you need to use onreadystatechange like in Ajax calls.

script1.onreadystatechange= function () {
   if (this.readyState == 'complete') yourFunction();
}

So something like this:

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