Automatically resize iframe height depending on content and cross domain solution autofiting of iframe

How to remove the scroll bars of iframe dynamicaly

Introduction of the problem

Does your iFrame step through multiple pages of varying heights? Or, does the height of the remote page change frequently? Do you find that the height of your iFrame is sometimes too short, cutting off the bottom of the remote page? Is your iFrame sometimes too tall, pushing down your content far beneath the embedded page?
Then this technique is for you.

This technique requires that you are able to edit the remote web-page. It requires a bit of script, and you’ll need to upload a couple of files to your web-host.

Your visitors must have javascript enabled, which, according to several sources i checked, is about 95% of all users. This method includes a fall-back, for users without javascript.

Explanation

Normally, the parent page is unable to see the height of the remote page embedded in the iFrame. This is a security restriction in browsers, as a security precaution. The assumption is that the page in the iFrame is in a different domain.

Here's the trick--we embed a hidden iFrame inside the visible iFrame. That hidden iFrame is in the same domain as the parent page. Therefor, the parent page is able to communicate with the hidden iFrame.

To pass the height of the content in the visible iFrame up to the parent web-page, the LoadHiddenIframe script in the remote page embeds it's height in the url of the hidden iFrame. Then, the parent page is able to grab the height from the src of the hidden iFrame, and then resize the visible iFrame.

Resizing of iframe if you load pages in iframe from your site

Here's one solution for resizing of iframe if you load pages in iframe from your site.
This of course doesn't solve the cross-domain problem. Setting document.domain might help if these sites are in the same place.
I don't think there is a solution if you are iframe-ing random sites.

<script type="text/javascript">
function autoIframe(frameId) {
   try{
      frame = document.getElementById(frameId);
      innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
      objToResize = (frame.style) ? frame.style : frame;
      objToResize.height = innerDoc.body.scrollHeight + 10;
   }
   catch(err){
      window.status = err.message;
   }
}
</script>

Other way to relsolve the problem

If you need auto resized iframe for your own content.

function autoIframe(){
   var x = 0;

   // reset iframe size for Opera
   if(navigator.userAgent.indexOf("Opera")!=-1){
   this.document.body.scrollHeight = this.document.body.offsetHeight
   }
   //IE, Opera
   var y = this.document.body.scrollHeight;
   while (x < y){
       x+=1;
   }
   parent.document.getElementById("ifrm").style.height = x

   ///////////////////// Firefox //////////////////////////////
   if(navigator.userAgent.indexOf("Firefox")!=-1){
   parent.ifrm.frameElement.height = this.document.body.scrollHeight+5;
   }
}

The body tag of the iframe content is needed to look like this:

<body onload="autoIframe()">

This script is tested with Opera 9.0, IE 7.0, Firefox 2.0