Dynamically load javascript on a webpage

When you work with a CMS sometimes you may need to dynamically add a javascript library on the fly.

The easiest thing to do is:

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headID.appendChild(newScript);

But what if you want to be notified when the javascript has been loaded? You can add the onload parameter:

newScript.onload = function(){
  func();
};

but you will find out that this will not work in IE, so what you really need to use is:

function loadJS(url, func) {
  var headID = document.getElementsByTagName("head")[0];         
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  if (newScript.readyState) {  //IE
    newScript.onreadystatechange = function() {
      if (newScript.readyState == "loaded" || newScript.readyState == "complete") {
          newScript.onreadystatechange = null;
          func();
      }
    };
  } else {  //Others
    newScript.onload = function(){
      func();
    };
  }
  newScript.src = url;
  headID.appendChild(newScript);
}

We will rely on the onreadystatechange event that IE will fire, unfortunately that event is, in reality, the progress of the loading and sometimes it reach the “complete” state, sometimes only the “loaded” state, so if we really want to be sure that our callback will be called we have to get the first one and then cancel the event.

You can learn more at: http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/

In a similar way you can also dynamically load CSS:

function loadCss(url) {
  var headID = document.getElementsByTagName("head")[0];        
  var cssNode = document.createElement('link');
  cssNode.type = 'text/css';
  cssNode.rel = 'stylesheet';
  cssNode.href = url;
  cssNode.media = 'screen';
  headID.appendChild(cssNode);
}