Iframe content problem

Question

Please help me out,

The very first time the iframe height is changing as per the loaded height but when the iframe contents are changed to bigger height than the present one and again coming to lower its not taking new value.

For example Loaded iframe height =1386px new content change iframe height = 3440px and again change to new height = 3440px(but actual height is very lesser than 1300px)

this is what i tried

$('iframe').load(function()
        {
            document.getElementById('loaderIFRAME').style.display = 'none';
            document.getElementById('myiframe').style.display = 'block';
            // Set inline style to equal the body height of the iframed content.

            if($.browser.msie){
                this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
            }else{
                this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
            }
        }

and the other one also same

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+ 'px';
      alert( objToResize.height);
   }
   catch(err){
      window.status = err.message;
   }
}

How can i solve it?

Answer 1

The problem is, when you have the iframe height set to a big value, then its scrollHeight always equals the big value, even if the real document height is smaller. You can try by setting the iframe height to 1px then read the scrollHeight property.

$('iframe').load(function(){
   try {
      var body = $(this).contents().find('body');
      this.height = 1;
      this.height = body.attr('scrollHeight');
   } catch(e){}
});

sometimes it is better to use offsetHeight+offsetTop properties. Here you can find my old implementation of this script.