An alternative to jQuery.load


Note: Are you looking to use jquery.ajax rather than jquery.load? Click here. The post below talks about using an iFrame as an alternative to AJAX.


A very long time ago, 2010 maybe, I was asked to build a site with an “app like feel”, which seemed to mean “we don’t like page refreshes”. At the time we used AJAX, we had control over the HTML generation so could strip everything but the HTML server-side. More recently however I was asked to do a similar thing, but without the ability to change the skeleton markup.

The primary issue with adding a full set of markup into an existing page is that the script tags will automatically be executed. The jQuery load method gets around this by removing the script tags from the HTML string, but everything else is added to the document. If you specify an ID then jQuery will add this HTML into the DOM and then select the element.

It’s a very useful function but can we do the same thing with an iFrame, and are there any advantages in doing so?

How

We commonly use iFrames for showing content from another domain. This commonly limits the communication between the parent and child pages due to the cross-domain policies. However pages on the same domain don’t have that limitation, we can access the content of the child frame directly from the parent page.

 
frame = document.getElementsByTagName('iframe'); 
innerDoc = frame.contentDocument || frame.contentWindow.document; 
// example select in the child frame 
elem = innerDoc.getElementById('anElementsId'); 

Why

But why might we want to use an iFrame rather than jQuery.load or a similar AJAX method? To my mind there are very few reasons to do this but biggest benefit is that you’re able to to run more complex and multiple selects rather than being limited to the ID selector.

In this method the child frame will load fully, all scripts will execute. The analytics scripts will run and the page would be rendered fully. This makes it more expensive in bandwidth and memory so remove the iFrames when you’re done (watch out for leaks) and this memory should be released…

Filed under: JavaScript