Tutorials

Dynamic Loading of JavaScript without using Eval

In trying to create faster loading Ajax applications it is important to reduce the amount of code that is downloaded. One of the best ways to accomplish this is to dynamically load JavaScript as you need it. This will allow that the initial load time is very short.

There are a few ways to accomplish this. One is to have multiple JavaScript files that are loaded using either eval or DOM manipulation (since I am of the school of eval is evil I will use DOM manipulation). The other is to have a server side script (such as a php or ruby script) dynamically create the needed JavaScript based on parameters that are passed through the URL and once again it would be loaded using either eval or DOM manipulation.

No matter which method you choose to use the below code will work to dynamically load the JavaScript. For those of you who have read my post on the JSON Load Object without using Eval (Click here to read the article) the following code will look very familiar as the methods are very similar.

//Dynamic JavaScript Creation
var javascriptload=new Object();
javascriptload.CreateObject=function(codeholderid, url){
	this.codeholderid=codeholderid; //This is the id of the element to hold the script code
	this.url = url;
	this.loadjavascript(codeholderid, url);
};
javascriptload.CreateObject.prototype={
	loadjavascript:function(codeholderid, url){
		var JavaScriptCode=document.createElement("script");
		JavaScriptCode.setAttribute('type', 'text/javascript');
	        JavaScriptCode.setAttribute("src", url);
		document.getElementById(codeholderid).appendChild(JavaScriptCode);
	}
};

In the above code you would pass in the id of the element to hold the JavaScript (this can be a div, body tag or any other tag that can hold a script tag) and you would pass in the URL to the JavaScript (either the separate JavaScript files or the dynamically created JavaScript).

Now that you have the object to dynamically load JavaScript go through your applications and reduce the initial load time in your Ajax applications. You might be surprised just how much faster you can get your applications to load.

A Better Ajax Back Button Solution

If you've spent any time coding an Ajax application you know that the one of the problems with Ajax is that it breaks the back button. You have probably seen solutions that use an iframe and a hash (#) in the url to fix this issue. While this works there is a much simpler way that I've been using in my applications for the last year or so.

The key is the A tag (also known as the anchor tag) and the name parameter with a hash in the url. The trick is to either dynamically create the element or to just change the value of the name parameter to the matching value of the hash.

Below is an example of changing the name of the anchor tag.

//Anchor Rename Object this could also be a simple function if preferred.
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorid){
	this.anchorid=anchorid; //This is the id of the anchor element
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholerid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorid){
		document.getElementById(anchorid).name = anchorname;
	}
};

In this example you would pass in the new value of the name (which must be the same value as after the hash in the url) and the id of the anchor element.

Below is an example of dynamically creating the tag and name values.

//Anchor Rename Object
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorholderid){
	this.anchorholerid=anchorholderid; //This is the id of the element to hold the new anchor
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholderid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorholderid){
		var AnchorCode=document.createElement("a");
	        AnchorCode.setAttribute("name", anchorname);
		document.getElementById(anchorholderid).appendChild(AnchorCode);	       
	}
};

In this example you would pass in the new value of the name (which again must be the same value as after the hash in the url) and the id of the anchor element.

Now the question that you may be asking is how does creating or renaming the anchor element help with fixing the back button. That is where when you call the object comes into play. You need to create or rename the object before a link is clicked. So, I would recommend using an onmouseover and an onfocus event to call the create or rename of the element so that before a link is clicked the required anchor element will be created.

I hope that this post has shown an easier solution to fix the back button problem that occurs when we create Ajax applications. Now go out there and try using it on your applications!

Update: I have posted a working example of this solution and it can be read here.

Syndicate content