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:
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:
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:
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.
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>
<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.
- Both kinds of iframes store their location changes into the browser's history.
- Neither kind of iframe stores its location changes into the browser's history.
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
< 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.