Control iframe height with jQuery

Question

I am using jQuery to control the height of an iframe.

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

This works when the height of the iframe increases. When the height decreases it does not work. It returns the old value only. Why is this happening?

Answer 1

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 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

This is a simple jQuery that worked for me. Tested in iExplorer, Firefox and Crome:

 $('#my_frame').load(function () {  
      $(this).height($(this).contents().find("html").height()+20);
});

I add 20 pixels just to avoid any scroll bar, but you may try a lower bound.