开发者

Automatic Iframe height

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?


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜