Hack 37. Control Browser History with iframes | Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Learn the black art of iframes and browser history.

An iframe is an internal frame that can point to and load an arbitrary URL within your HTML page. Here is an example small iframe showing Google:

<iframe src="/books/4/254/1/html/2/http://www.google.com" style=   "width: 320px; height: 300px;"> </iframe>

Your browser history is the list of pages you have visited. When you press the back and forward buttons in your browser, you are jumping through your browser history.

Sometimes, for various reasons, programmers want to control what is placed into the browser's history. Think of this as a primitive mechanism that can be used in more elaborate Ajax and DHTML hacks; it's a building block useful in all kinds of crazy Ajax kung-fu. It's good to know about tricks such as this one when you're confronted with Ajax design issues or when you stumble across very strange bugs that might be caused by the different kinds of iframe we will discuss here.

There are two kinds of iframe. The first kind are located right within your HTML and are loaded in the page:

<html> <body> <iframe     src="/books/4/254/1/html/2/http://www.google.com"> </iframe> </body> </html>

Code can also create iframes dynamically, through the DOM and JavaScript, after the page is finished loading:

<html> <head> <script language="JavaScript"> function initialize(  ) {     var testFrame = document.createElement("IFRAME");     testFrame.id = "testFrame";     testFrame.src = "http://www.google.com";     document.body.appendChild(testFrame); } </script> </head> <body onload="initialize(  )"> </body> </html>

Okay, so there are two kinds of iframe. Who cares? Well, it turns out these two kinds of iframe have completely different behaviors when it comes to history in different browsers!

Browser Lowdown

Here's the lowdown for each kind of browser:

In Firefox, if the iframe is inside the HTML and was loaded in the page, any location changes to it are stored in the browser's history. If the iframe was written into the DOM through JavaScript after the page finished loading, no location changes are stored in the browser's history.
In Internet Explorer, location changes are stored in the browser's history for both kinds of iframe.
In Safari, location changes are not stored in the browser's history for either kind of iframe.

You can see this for yourself in the demos discussed in the next section.

Browser Demos

Two demos have been provided to illustrate how Firefox and Internet Explorer handle the different kinds of iframe. In both demos, we dynamically change the iframe's location between four different web sites.

In the first demo, viewable at http://codinginparadise.org/projects/tutorials/tale_of_two_iframes/static_iframe.html, we are dealing with an iframe that is in the HTML on page load. In this case, you will find that all of these sites are in the browser's history in both Firefox and IE. Press the back and forward buttons when the pop-up saying "Finished" appears, and you will see the iframe's contents change between each site.

In the second demo, viewable at http://codinginparadise.org/projects/tutorials/tale_of_two_iframes/dynamic_iframe.html, we are dealing with a dynamically created iframe. Here, you will find that only the initial page load is in the browser's history in Firefox, while all sites are in the history in IE.

One small footnote is that if you have a static iframe that is loaded in the HTML, and that iframe has a src value initially (as in <iframe src="/books/4/254/1/html/2/http://www.google.com"></iframe>, this initial value is not placed in the browser's history. In this case, only successive changes to that static iframe are placed in the history.

You can use the special behavior of these two kinds of iframe for some real trickery. First, make them invisible using CSS. You can then decide whether you want something to enter the history or not, choosing the appropriate kind of iframe. If you are working with a DHTML application that uses iframes for remote communication (detailed at http://developer.apple.com/internet/webcontent/iframe.html) instead of XMLHttpRequest, for old browser compatibility, knowing the difference between these two kinds of iframe can be very useful, because you can choose whether remote iframe communication is placed in the browser's history or not.

For a discussion of how you can use iframes to make the browser back button work normally with Ajax applications, check out "Fix the Browser Back Button in Ajax Applications" [Hack #68].

Brad Neuberg