Resize iframe height based on its content

This is a small experiment to showcase the possibility of resizing iframe based on its loaded content.

View Demo | Download Source

All you need is just add the below JavaScript function in your html.

JavaScript code:

function setIframeHeight(iframe) {
  if (iframe) {
     var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
     if (iframeWin.document.body) {
	iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
     }
  }
};

Call the JS function like this

window.onload = function(){
   setIframeHeight(document.getElementById('iframe_id'));
}

I quickly did a small demo based on this. This is how it looks





Warning: This works only for content in the same domain. Browser will throw error for cross-domain content.

View Demo | Download Source