Iframe Height

Question

I am using Jquery to control the height of Iframe.

jQuery("iframe",top.document).contents().height();

It's working for Increment of Iframe. When Iframe height decrease its not working.It returns the old value only.

Anbody know why this is happening?

Answer 1

It works for me If I set it and retrieve it without using .contents(). Please see my example below.

function changeFrameHeight(newHeight){
  jQuery("iframe",top.document).height(newHeight);
  alert("iframe height=" + jQuery("iframe",top.document).height());
}

EDIT: If I understand correctly, you are trying to get rid of the scroll bars by calling the increment and go back to the original height by calling decrement.

After doing multiple tests across different browsers. Here's the code that works in FF, IE, Chrome, Safari and Opera.

//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();

Change your heightIncrement function to use the following:

heightIncrement:function(){
 var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
 jQuery("iframe",top.document).css({height:heightDiv});
}

Change your heightDecrement function to use the following:

heightDecrement:function(){
 jQuery("iframe",top.document).css({height:originalHeight});
}

Answer 2

At the time of loading I call this function

heightIncrement:function(){  
        if($.browser.mozilla)
        { 
       var heightDiv   = jQuery("iframe",top.document).contents().attr("height")+"px";     
       jQuery("iframe",top.document).css({height:heightDiv});
        }
        else if($.browser.opera  || $.browser.safari || $.browser.msie)
        {      
         var heightDiv   = jQuery("iframe",top.document).height();          
       jQuery("iframe",top.document).css({height:heightDiv}); 
        } 
}

if I use without contents() it returns zero.

Answer 3

i use the following and it works perfectly...

$("#frameId").height($("#frameId").contents().find("html").height());

of course just when it's called (no "autoresize")... but it works increasing as decreasing

Answer 4

I wish I could get that to work homerj. That would be such a wonderfully simplistic solution, however my page content is pulled in via ajax, and I cannot get it to return a height of .find('html')

Answer 5

This is ancient but hopefully it helps.

Seems like Chrome (or maybe all of webkit, not sure) has a bug where the scrollHeight can increase but not decrease (at least in the case of content in an iframe). So if the content grows, then shrinks, the scrollOffset stays at the higher level. That's not very nice when you are attempting to make the iframe's height just big enough for it's ever-changing content.

A hack workaround is to make it recalculate the height by setting the height to something definitely small enough to cause the iframe's height to be smaller than it's content, then the scrollHeight is reset.

var body = frame.contentWindow.document.body;
var height = body.scrollHeight; // possibly incorrect
body.height = "1px";
height = body.scrollHeight; // correct

This can cause a slight flicker but normally doesn't, at least, it works on my machine (tm).

Answer 6

when i tried to load external web site it gives me error. it says permission denied. do you people know how to solve it ?

Answer 7

I have successfully resize iframe's height and width when it is loaded. basically you can do this as below, and I also post a small article on my blog: http://www.the-di-lab.com/?p=280

$(".colorbox").colorbox(

{iframe:true,

innerWidth:0,

innerHeight:0,

scrolling:false,

onComplete:function(){

$.colorbox.resize(

{

innerHeight:($('iframe').offset().top + $('iframe').height()),

innerWidth:($('iframe').offset().left + $('iframe').width())

}

);

}

}

);