Loading Page Styles And JavaScript With JavaScript

2nd July 2008 - 3 minutes read time

One good technique when using JavaScript is to load a single JavaScript file and get this file to load any other JavaScript or CSS documents that are needed. This means that you can simplify the instillation of a script on a page by including a single file, which then loads everything else it needs. Here is how to accomplish such a task.

The basic idea is that you add the references you need to the DOM structure of the document. Let's say that we want to load a CSS file called styles.css. To do this at run time we need to create a <link> element and give it some parameters before adding it onto the end of the <head> element of the page. Here is the code needed to do this.

// create the link element and store it in a variable.
var linkElement = document.createElement("link");
// set the rel attribute of the link element to be stylesheet
linkElement.setAttribute("rel", "stylesheet");
// set the type attribute of the link element to be text/css
linkElement.setAttribute("type", "text/css");
// set the href attribute of the link element to point to the file
linkElement.setAttribute("href", "http://www.example.com/styles.css");
// add the link element to the head of the document.
document.getElementsByTagName("head")[0].appendChild(linkElement);

To do the same thing with JavaScript we just need to change the element and attributes a little. Here is how to load a script file called script.js.

var scriptElement = document.createElement("script");
scriptElement.setAttribute("type","text/javascript");
scriptElement.setAttribute("src","http://www.example.com/script.js");
document.getElementsByTagName("head")[0].appendChild(scriptElement);

You can also streamline this process by creating a function that takes the filename and what sort of file we are trying to load.

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ 
  //if filename is a external JavaScript file
  var theElement = document.createElement("script");
  theElement.setAttribute("type","text/javascript");
  theElement.setAttribute("src", filename);
 }else if(filetype=="css"){
  //if filename is an external CSS file
  var theElement= document.createElement("link");
  theElement.setAttribute("rel", "stylesheet");
  theElement.setAttribute("type", "text/css");
  theElement.setAttribute("href", filename);
 }
 if (typeof element!="undefined"){
  document.getElementsByTagName("head")[0].appendChild(theElement);
 }
};

To use this function do the following.

loadjscssfile("http://www.example.com/script.js","js");

One final note is that the file name must be absolute reference to the file. The rule is, if you can't cut and paste the URL into your browser and get the file then this method isn't going to work.

Add new comment

The content of this field is kept private and will not be shown publicly.