AJAX Tutorial: A Tale of Two IFrames (or, How To Control Your Browsers History)

This is a mini-tutorial on the black art of iframes and browser history, known to AJAX experts but rarely presented clearly.

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



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 their browser's history or not. Think of this as a primitive 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 these tricks when confronted with AJAX design issues, or when you stumble across very strange bugs which might be caused by the different kinds of iframes I will present.

There are two kinds of iframes, those that are right within your HTML and loaded in the page:
<html>
<body>
<iframe id="testFrame"
src="http://www.google.com">
</iframe>
</body>
</html>
and those that are created 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, fine, so there are two kinds of iframes; who cares? Well, it turns out these two kinds of iframes have completely different behaviors when it comes to history in different browsers!

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 after the page was finished loading through JavaScript, then no location changes are stored in the browser's history.
In Internet Explorer:
  • Both kinds of iframes store their location changes into the browser's history.
In Safari:
  • Neither kind of iframe stores its location changes into the browser's history.
You can see this for yourself with the following demos. In both demos we dynamically change the iframe's location between four different web sites.

In the first demo, when we are dealing with an iframe that is in the HTML on page load, 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 popup saying "Finished" appears, and you will see the iframe's contents change between each site.

In the second demo, when we are dealing with a dynamicly created iframe, you will find that only the initial page load is in the browser's history, while all sites are in the history in IE.

One small footnote. If you have a static iframe that is loaded in the HTML, and that iframe has a src value initially:

<iframe src="http://www.google.com"></iframe>


then this initial value is not placed into the browser's history, only successive changes to that static iframe are placed into the history.

You can use the special behavior of these two kinds of iframes for some real trickery. I won't go too much into possible uses, since I mostly want to highlight the differences between these two iframes in this tutorial. First, you make them invisible using CSS. Then, you decide whether you want something to enter the history or not, choosing the appropriate kind of iframe. If you are using the iframe remote communication technique instead of XmlHttpRequest, for old browser compatibility, knowing the difference between these two kinds of iframes can be very useful, since you can choose whether remote iframe communication is placed into the history or not.

Comments

dipiamaze said…
In your second demo, try running the "initialize" method called from the onload on a timer:

< body onload="setTimeout('initialize()', 100);" >

This will cause FF to add all the sites to the browser history.

Next you can try commenting out everything except for the few lines of code that dynamically create and append the IFRAME. Notice that an entry is still added to the stack on FF.

Fun stuff. Basically, FF allows you to manipulate and dynamically create IFrames all you want during the loading sequence. Once loading is complete (after onload() fires), any dynamically created iframes or src changes are recorded in the browser history. I haven't been able to work around this bug in FF.
todd said…
Running FF1.5 here seems to have the same behaviour as you describe IE having, haven't gone *back* and tried it in 1.0 yet to see the difference :-)
todd said…
In Safari Version 2.0.3 (417.8) It seems like browser history works in the sense that an iframe that exists in the document, does keep history. It does appear to cause safari to do a complete page reload rather then just the iframe. So, functionally it's equivalent - just not so efficent
Brad Neuberg said…
Hi Ranjith, that should work; it's one of RSH's unique selling points that history is conserved even if you type a different domain then come back. Is that not working for you? If it isn't send me details on your platform so I can have a bug report.
Matt Montag said…
why do the comments have time stamp but no date stamp? in any event I'm guessing this info might be outdated as of 6/3/2008.
Unknown said…
I am having same issue as described by Ranjith Arvapalli i.e. coming back to step4 after going off-site in IE. Please see this post http://preview.tinyurl.com/cwpejv. Let me know if anyone found solution
Unknown said…
Issue was resolved after removing Google map code. We are still wondering what is the real issue and how to resolve it.
Smart Alec said…
Am I able to modify the CSS used in an iframe? ie take a form from my site A and rebrand it for site B while still keeping all my data signups and page tracking in one place?
Unknown said…
Has anyone been able to fix the bug in FF where it adds the original page to the history if you change the iframe "src" after the onload event?
Unknown said…
If one has an AJAX drop down happening inside the iframe - even that gets limited (scroll). How can one keep the Ajax out of the iframe, and not allow for any scroll?