How to change height of iframe based on dynamic conent within the iframe?

Question

I have an iframe that has dynamic content. If the answers specific questions, additional information displays (hidden div becomes visible). I'd like the height of the iframe to expand. I know this question has been asked on here multiple times, but it seems like it is typically when a different page within the iframe is loaded, not when content is changed dynamically within the iframe.

Here is an example I tried to put together using jsFiddle:

iframe: http://jsfiddle.net/B4AKc/2/

page: http://jsfiddle.net/PmBrd/

Any ideas?

It's still a tough problem. Here's the best answer on SO: http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content/362564#362564 — Gregg B, Nov 26 '11 at 15:41
Is the content from the iframe on the same domain as the page which contains the iframe? — dSquared, Nov 26 '11 at 15:42
same domain? damn here I thought I was getting a quick, easy answer! — pythonian29033, Mar 19 '14 at 11:53

score 11 · Accepted Answer · answered Nov 26 '11 at 16:04

Does this work for you?

http://jsfiddle.net/PmBrd/1/

Code:

var iframe = document.getElementById("ifr").contentWindow;

iframe.$(".toggle_div").bind("change", function () {
    $("#ifr").css({
        height: iframe.$("body").outerHeight()
    });
});

Since you mentioned they are in the same domain, it's just a matter of doing something similar with your real app.

Eugine Joseph · Answer 2 · 2014-01-27T07:29:02.470

Check this one. You can get the iframe size using javascript itself.
Using setInterval, check the window height each time.

< iframe src='<YOUR_URL>' frameborder='0' scrolling='no' id='frame_id' style='overflow:hidden; width:984px;' >
</iframe>

<script language="javascript" type="text/javascript">
setInterval(function(){
    document.getElementById("frame_id").style.height = document.getElementById("frmid").contentWindow.document.body.scrollHeight + 'px';
},1000)
</script>

Check this

score 1 · Answer 3 · answered Mar 05 '13 at 10:07

1

Esailija's answer works fine, but this is nicer imo.

$('#ifr').contents($(".toggle_div")).bind("change", function () {
    $("#ifr").height($("#ifr").contents().find("html").height());
});

answered Mar 05 '13 at 10:07

olofom

5,533
9
34
50

score 1 · Answer 4 · answered Dec 25 '13 at 23:41

may be a bit late, as all the other answers are from 2011 :-) but... here´s my solution. Tested in actual FF, Chrome and Safari 5.0

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

Hope this will help anybody.

score 0 · Answer 5 · answered Nov 26 '11 at 16:06

Take a look at the jQuery postMessage plugin. It allows you to pass information from the child frame to the parent. You could change the code inside the child frame to post the content height to the parent on content change, which the parent could then use to resize the iframe accordingly.

The two pages must be on the same domain to work.

I hope this helps!

How to change height of iframe based on dynamic conent within the iframe?

5 Answers5

Linked