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?

Solution 1

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.

Solution 2

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

Solution 3

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

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

Solution 4

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.

View more solutions