IFrame Techniques

Most of the web developers at some point or other would have used iFrames for inline presentation or to simulate parallel requests to server. Though handy these iFrames have some drawbacks and do not always behave the way we intend. This is mainly a scripting issue and how iFrame component is utilized within an application. First the drawbacks,

• Iframes block onload of the main page. i.e onload Event on the main page can only fire after all elements on the main page is loaded, including the iFrame and its contents. If iFrame content takes longer to load, then main page' onload event may sometimes never get fired.
• The main page and iframe share the same connection pool to establish connection with web server. 

The first issue is under developer control, whereas the later depends on the browser and may need changes to deployment architecture.

Normal Iframe

You all know this one. It's the default way to load an iframe and works in all browsers:

<iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto">
</iframe>

Using the Normal Iframe technique will result in the following behaviour in all browsers:

• Iframe starts loading before onload of main page
• Onload of the iframe fires after all iframe content is done loading
• Onload of main page fires *after* the iframe's onload fires: the iframe blocks the main page onload !
• While the iframe is loading, one or more browser busy indicators show something is loading  

This technique is OK if iFrame does not take longer time to load.

iframe After Onload

Imagine you want to load something in an iframe, but it's not really important for the page. Or the content of the iframe is not immediately visible to the user because it's way down below the fold or hidden behind a link/tab. Consider deferring the loading of the iframe until after the main page is done.

<script>

//doesn't block the load event
function createIframe(){
  var i = document.createElement("iframe");
  i.src = "path/to/file";
  i.scrolling = "auto";
  i.frameborder = "0";
  i.width = "200px";
  i.height = "100px";
  document.getElementById("div-that-holds-the-iframe").appendChild(i);
};
 
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
window.attachEvent("onload", createIframe);
else window.onload = createIframe;

</script>

The Iframe After Onload technique will consistently show the following behaviour in all browsers:

• Iframe starts loading after onload of main page
• Onload of main page fires without interference of the iframe: the iframe does *not* block the main page onload !
• While the iframe is loading, one or more browser busy indicators show something is loading 

This technique though does not block the main page has two main drawbacks
1. Site visitors will still see browser busy indicator(s) while the iframe is loading and that means that they will see those indicators for a longer period of time (versus Normal Iframe).
2.There is a good chance the user leaves the page before the iframe has finished loading.
 

Iframe setTimeout()

The objective is to load the iframe without blocking onload. However, this technique will often not have the desired effect in IE8.

<iframe id="iframe1" src="" width="200" height="100" border="2"></iframe>

<script>

function setIframeSrc() {
  var s = "path/to/file";
  var iframe1 = document.getElementById('iframe1');
  if ( -1 == navigator.userAgent.indexOf("MSIE") ) {
    iframe1.src = s;
  }
  else {
    iframe1.location = s;
  }
}
setTimeout(setIframeSrc, 5);
</script>

In all browsers but IE8, the Iframe setTimeout() technique will consistently show the following behaviour:

• Iframe starts loading before onload of main page
• Onload of the iframe fires after all iframe content done loading
• Onload of main page fires soon: the iframe does *not* delay the main page onload
• While the iframe is loading, one or more browser busy indicators show something is loading 

This last option seem to provide both parallel loading and non-blocking of main page. However, with every browser version bringing in new features one should not be surprised if the sequence listed above varies for any particular browser version.