Ajax, one of the coolest techniques for web development, has brought a lot of dynamicity and flexibility to us. But it also has lot of limitations, and that’s why I always tell people to ask themselves whether they really need ajax or not before they start developing a project.

Anyways, one of the limitations of ajax is, if you load a html page in a div, it will only give you the contents. The css and the javascript files won’t work. So the page won’t look as it looks when loaded in an iFrame.

Why CSS & JS are not loaded defaultly

In case of iFrames, what happens is, the frame itself is considered as a separate window. That’s why; the css and javascript files are executed within that scope. But, if you load some html content to a div, using ajax, the content (including all elements) become attached to that div. That means those elements become a part of the parent page. So if the css or javscript files are executed, they will consider the elements, ids and classes of both the parent and child page equally.

That means, if a div in the child page, with id=’myDiv’ has certain properties defined in its css, and another div with same id=’myDiv’ is there in the parent page, and the css of the child page is executed, then the property of that will be applied to both the divs of parent and child page. Same problem is there with javascript also.

** Parent page means the page where I’m loading, and child page is the page which I’m loading.

How to force load them


	var pagelink = "pages/firstpage/";
	var url = pagelink + "index.html";

		url : url,
		type : "GET",
		dataType : "html"
	}).done(function(data) {
		$("#mainPage link").each(function() {
			var cssLink = pagelink + $(this).attr('href');
			$("head").append("	<link href="&quot; + cssLink + &quot;" rel="stylesheet" />")
		$("#mainPage script").each(function() {
			var jsLink = pagelink + $(this).attr('src');
			$("head").append("<script type="text/javascript" src="&quot; + jsLink + &quot;"></script>")

 }).fail(function(jqXHR, textStatus, errorThrown) {
 $("#mainPage").html("Error!! File is not loaded");

Let’s consider, the id of the div of the parent page is ‘mainPage’, where we will load the child page. So first of all, I’ve changed the internal html and have showed a text ‘Loading…’.

In line number 3, the variable ‘pagelink’ is initialized with a the path of the folder where I have my child page.

By using the variable ‘url’, I have set the exact path of the particular file, which is my child page.

From line number 6, we have the actual code to load the index file and as well as to execute the javascript and css files. Using $.ajax() function, I’m loading the index file. Once the file is loaded, the ‘done’ function will be called, where first of all I’ve placed the html data in the ‘mainPage’. After that I’m running a loop for each <link /> element inside the mainPage and initializing the variable cssLink with corresponding css links, and appending <link /> tags to the head, which will automatically execute the css files and will set the properties to the corresponding elements. Similar thing is done for the javascripts also (from line#16).

Risk factors & solutions

1.  Placements: Sometimes few browsers don’t load the contents of the <head> element. So to be in the safer side, put your <link /> and <script> tags outside the <head> element of the child page.

2. Names: Don’t give same id or class names in both the pages; or make some logical separation. Otherwise they will conflict.

3. Path: In this demo I’ve considered the href of links or src of scripts are referring files from the same folder. But if they have references from parent folders (like, src=”../../js/main.js”), then you have to perform logical operations to get the relative link. 

Demo & Source Codes

live-demo-button download-button