Make iframe height appropriate content

Question

How can I adjust the iframe height for the content inside it? I assume that you have calculated the difference between the height of the content and the height of the iframe (something I don’t know how to do it) and use this with a while loop to increase the variable used as the height, but I cannot wrap her head around how to actually do these things. Before asking: yes, the content is in a frame from my site. Not cross-domain.

Answer 1

Not quite sure why you want to use an iframe, not a dynamic div populated, say, through ajax, but:

Put the contents in the iframe in the div, and then get the height of the div. I would suggest using jquery like this:

$("#divId").height(); 

But if you cannot use jquery, you should be able to use this:

 document.getElementById("divId").offsetHeight; 

Then you need to set the height of the iframe for what you got.

JQuery

 $("#iframeId").height($("#divId").height()); 

regular js:

 document.getElementById("iframeId").style.height = document.getElementById("divId").offsetHeight; 

Answer 2

 <iframe id="moo" src="something.html"><iframe> <script> function onContentChange(){ var NewSize=$('moo').getScrollSize(); $('moo').setStyles({ width: NewSize.x, height: NewSize.y }); } </script> 

and inside somthing.html, at the bottom or in the onload event, do something in the lines

 window.parent.window.onContentChange() 

Answer 3

Dynamically display iframe in javascript after drawing container element ("td1").

 <script type="text/javascript"> var iframesrc = "@Href("~/about")"; function init() { var vHeight = document.getElementById("td1").offsetHeight; document.getElementById("td1").innerHTML="<iframe style=\"width:100%; height:" + vHeight + "px\" src=\"" + iframesrc + "\"></iframe>"; } window.onload = init; </script> 

...

 <td id="td1" style="width: 100%; height:100%;"> </td> 

Answer 4

Here is a solution using jQuery:

 $('#iframe').height($('#iframe').contents().find('body').height());