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

Answer 1

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

Answer 2

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.

Answer 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());
});

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

Answer 5

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!