Dynamically Load Content Without AJAX
This technique loads content into a hidden iframe. Javascript copies the new content into a div. This is an easy technique to implement, light weight, fast page load time, and cross-browser compatible.
When the page loads initially the content of the iframe is not known. Therefore the source (src="about:blank") is the browser's default page. The height and width are set to 0, and the visibility is hidden with css. Place the iframe at the bottom of the page just before the endingv</body> tag.
<iframe id="contentloader" name="contentloader" style="width:0;height:0;visibility:hidden;" src="about:blank"></iframe>
Example 1:
This method uses the iframe to tell the parent page when it has loaded.
HTML:
<a href="contentload.html" target="contentloader">Load this content</a>
<div id="content"></div>
<iframe id="contentloader" name="contentloader" style="width:0;height:0;visibility:hidden;" src="about:blank"></iframe>
IFRAME: (The contents of the iframe html file)
<div id="iframecontent">Hello, this is the content that will be dynamically inserted into the parent HTML document.</div>
<script>
window.onload = function() {
top.document.getElementById("content").innerHTML =
document.getElementById("iframecontent").innerHTML;
}
</script>
Example 2:
This method uses the parent page to listen to the iframe's status code to determine when the iframe has has loaded.
The code below is entirely in the parent page. It reads the data in the div in the iframe. The div id is "contentloader".
<a href="contentload.html" target="theiframename">Load this content</a>
<div id="content"></div>
<iframe id="contentloader" name="theiframename" style="width:0;height:0;visibility:hidden;" src="about:blank"></iframe>
document.getElementById("contentloader").onload = function() {
top.document.getElementById("content").innerHTML =
window.frames["contentloader"].document.getElementsByID("iframecontent").innerHTML);
}
IFRAME: (The contents of the iframe html file)
<div id="iframecontent">Hello, this is the content that will be dynamically inserted into the parent HTML document.</div>
Note: Example 2 does not require any special Javascript in the iframe for it to load into the page.