20

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?

4
  • @José Basilio - yes I find the height of the Iframe contents and set to the Iframe.
    – Saravanan
    Jun 1, 2009 at 12:20
  • @porneL - Can u pls explain how to find the object or feature of Iframe?
    – Saravanan
    Jun 1, 2009 at 12:20
  • @Saravanan - Please read my edited post. Jun 1, 2009 at 13:15
  • @José Basilio - Sorry it returns zero only.I am get the height using iframe parent Div height.It works fine. Anyway Thanks for ur help it helps for me in some other place.
    – Saravanan
    Jun 2, 2009 at 6:54

9 Answers 9

31

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

3
  • 5
    I don't think this will work with cross domains. Please help if you've a solution for this. Oct 3, 2011 at 10:17
  • 1
    I had a problems with ie9, using "body" in place of "html" sorted it out for me i.e, $("#frameId").height($("#frameId").contents().find("body").height()); Jan 21, 2013 at 3:57
  • excellent job! working like a charm with "body" instead of "html" in all browsers!
    – doniyor
    Mar 11, 2015 at 14:42
5

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});
}
3

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 frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0];
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).

1
  • 1
    I ran in to problems setting the height to 1px - sometimes, the recalculation would be off. I tried 'auto' as suggested in in this answer and it seems to work in more cases. But overall this seems to be a great way to get around the bug (?) with Chrome. Feb 4, 2013 at 22:08
1

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.

3
  • You should use object/feature detection rather than browser detection, e.g. read height using both methods and see which returns good result.
    – Kornel
    Jun 1, 2009 at 11:34
  • @Saravanan - It looks like you are trying to retrieve the height and then setting again to the same thing. Is that correct? Jun 1, 2009 at 11:38
  • In today's JQuery using $(".. instead of jQuery(".. will work. Mar 19, 2012 at 18:03
1

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.

0

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

}

);

}

}

);

0

If the iframe source is a different domain than its parent, then you will probably need to use easyXDM.

0

i use this :

$('#iframe').live('mousemove', function (event) {

var theFrame = $(this, parent.document.body);

this.height($(document.body).height() - 350);
});

1
  • will 'mousemove' be ineffective as it is triggered so often?
    – Minqi Pan
    Apr 8, 2012 at 3:44
0

I'm not sure if people are satisfied with their methods but I've written up a very very simple approach that seems to work quite well for me, in the newest of Safari, Chrome, IE9, Opera and Firefox.

I had a problem resizing a google calendar fed iFrame so I've just made a default size to it in the iFrame's style: width="600" and height settings of basically the maximum I would want, 980 I believe, then wrapped that in a container Div with height and width at 100% and min-height and min-width at 400px and 300px respectively , and then added some jQuery to run at onload and onresize...

        <script>

        var resizeHandle = function(){
            var caseHeight = $('#calendarCase').height();
            var caseWidth = $('#calendarCase').width();
            var iframeWidth = $('#googleCalendar').width(caseWidth - 10);
            var iframeHeight = $('#googleCalendar').height(caseWidth - 10);;
        };


</script>


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">

so to clarify, the resize function runs onLoad because I am targetting mobile phones and tablets in my responsive design, which takes the height and width of the calendarCase div and sets the height and width of the iframe (#googleCalendar) accordingly, minus 10 pixes for some padding.

edit I forgot to mention that I've used the caseWidth to set the height of the iFrame in order to keep the proportions constrained and somewhere square.

This has worked fine so far, if anyone has any ideas why it might not be stable please advise,

cheers

Not the answer you're looking for? Browse other questions tagged or ask your own question.