CSSing: Including script files from script

This short piece of code shows how to use Javascript to properly include javascript source files into code without having to hard code EACH script tag into your HTML. We use this technique rather than trying to do insane things with writeln() which will no doubt cause problems.

The first part is simple, include the base javascript which includes the writes into the head of your document:

<script type="text/javascript" src="js/library.js"></script>

Any files that belong to your JavaScript application should be loaded through this libary.js file.

The library.js file

The library.js file is a bit more complicated. The methods that we use are DOM methods. That means that this technique will not degrade into old browsers. However, if you're writing complicated JavaScript applications, you probably should avoid support for those browsers.

So, the first thing we want to do is make sure that the browser supports DOM methods. So the first line of library.js is a conditional:

if (document.getElementById) {
	// the majority of the libary.js code goes here
} else {
	// add some non-support code if necessary
}

Since the full DOM might not be created yet, we should note that we will need to load these scripts using a function at the body's onload. That entails two things for our code:

We need to create a function
We need to add that function onload

So, the first part is easy, we create a function as the second line of our code:

if (document.getElementById) {
	function loadLibrary(e) {
		// the contents are discussed below
	}
} else {
	// add some non-support code if necessary
}

We can add loadLibrary to the onload in two ways. The simple way is to set window.onload equal to the function. The slightly better method is to use Phrogz's attachEvent() function. Using the simple method has a number of problems, namely that you overwrite any other onload functions in the process. However, for simplicity sake, let's use it:

if (document.getElementById) {
	function loadLibrary(e) {
		// the contents are discussed below
	}
	
	// add the loadLibrary function to the onload
	window.onload = loadLibrary;
	
} else {
	// add some non-support code if necessary
}

Adding <script> elements with DOM

If we left the code as it is now, it would do almost nothing. We still need to add the script elements to the page. To do this, we need to know a couple things. First of all, the code below relies on a <head> element to be present in your document. Since all good code has a head, this should be trivial. Second, we need to know how DOM's create element works.

When using DOM, every document has a method called "createElement" which takes a name. In this case, the name we're using is "script". For every script that our JavaScript application uses, we need a NEW element created.

Also, every script element has two properties we need to set: type and src. These are the same attributes that you need when you hard code the <script> tags into HTML code.

So, with that, the code is simple:

if (document.getElementById) {
	function loadLibrary(e) {
		// these are just shortcut variables:
		var d = document;
		
		// save time by not having to type 'text/javascript' in the loop
		var t = 'text/javascript';
		
		// just so that we don't have to write /javascript/ all over
		var l = '/javascript/';	
		
		/* 	get the head of the document:
			gTBTN returns an array, and we only need
			the first one (and there SHOULD only be one	*/
		head = document.getElementsByTagName('head')[0];
		
		/* 	you can loop over the following section for
			as many scripts as you require: 			*/
		e = d.createElement('script');	// create a script element
		e.type = t;	// set the type of the script
		e.src = l + '1.js';	// point the script tag at your js file
		head.appendChild(e);
		/* 	end creating an element,
			close the loop 			*/
		

	}
	
	// add the loadLibrary function to the onload
	window.onload = loadLibrary;
	
} else {
	// add some non-support code if necessary
}

That's it! No more. Though, one last note, if you document calls javascript functions which are created in the files included by libary.js, you might want to make alternatives for browsers that don't support DOM. If you don't those browsers may throw errors about functions not being defined.

CSSing

Thursday, August 12, 2004

Including script files from script

The library.js file

Adding <script> elements with DOM

0 Comments:

Previous Posts