Load External JavaScript or CSS file Dynamically

Sometimes it is useful to load JavaScript or CSS file dynamically. In [1] and [2], there are several different method to do this. Here I do not do anything original. I just summarize the posts and give a single function to load external JavaScript or CSS files on demand in two different ways. The following is my summarized function to load JavaScript or CSS:

Source Codefunction AJAXLoad(type, loadByXMLHttp, url) {
  var ext;
  if (type == "js") {
    ext = document.createElement('script');
    ext.setAttribute("type","text/javascript");
  }
  if (type == "css") {
    ext = document.createElement('link');
    ext.setAttribute("type", "text/css");
    ext.setAttribute("rel", "stylesheet");
  }
  if (!loadByXMLHttp) {
    if (type == "js") {
      ext.setAttribute("src", url);
      if (typeof ext != "undefined") {document.getElementsByTagName("head")[0].appendChild(ext);}
    }
    if (type == "css") {
      ext.setAttribute("href", url);
      if (typeof ext != "undefined") {document.getElementsByTagName("head")[0].appendChild(ext);}
    }
    return;
  }
  var xmlhttp;
  if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
  else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4) {
      if (xmlhttp.status == 200) {
        ext.innerHTML=xmlhttp.responseText;
        document.getElementsByTagName("head")[0].appendChild(ext);
      } else {
        console.log('cannot load external file :'+url);
      }
    }
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}

Usage

// Usage 1: Load CSS in element tag
AJAXLoad("css", false, "http://fonts.googleapis.com/css?family=Gentium+Basic|Special+Elite&subset=latin,latin-ext");

// Usage 2: Load JavaScript in element tag
AJAXLoad("js", false, "http://www.example.com/static/index.js");

// Usage 3: Load CSS by XMLHttp call (AJAX way)
AJAXLoad("css", true, "http://fonts.googleapis.com/css?family=Gentium+Basic|Special+Elite&subset=latin,latin-ext");

// Usage 4: Load JavaScript in by XMLHttp call (AJAX way)
AJAXLoad("js", true, "http://www.example.com/static/index.js");

For most cases, usage 1 and 2 will work as expected. But usage 3 or 4 will not work because of cross domain scripting. For security reasons, XMLHttp call to servers on other domains is not allowed. There are several workaround to achieve cross domain scripting, but this is beyond the topic of this post.

If you load JavaScript after the page is ready, there are chances that you code will not run automatically. Please refer to [3], [4], and [5] for more details. And to know how XMLHttp works, please refer to [6].

References:

[1]	4 ways to dynamically load external JavaScript(with source)

[2]	Dynamically loading an external JavaScript or CSS file

[3]	Are dynamically inserted <script> tags meant to work?

[4]	Can scripts be inserted with innerHTML?

[5]	Executing <script> inside <div> retrieved by AJAX

[6]	AJAX Tutorial

[7]	[GopherJS] Insert CSS Dynamically