Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 506
Michael Avatar asked Nov 26 '11 15:11

Michael


People also ask

How do I resize an iframe in HTML?

Edit the width attribute. You should see the attribute "width=" after the URL in the iframe tag. Edit the width in pixels in quotations (" ") after the "width=" attribute. For example, if you want the width to be 300 pixels, you would enter "width="300px"" after the URL in the tag.

Can you edit content in an iframe?

You can't edit the content of an iframe tag.


2 Answers

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.

like image 160
Esailija Avatar answered Nov 15 '22 03:11

Esailija


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

like image 29
Eugine Joseph Avatar answered Nov 15 '22 02:11

Eugine Joseph