make iframe height fit content

Question

How would I make an iframe's height adjust to the content within it? I assume you'd calculate the difference between the content height and iframe height (something I don't know how to do) and use that with a while loop to increment a variable to use as a height, but I can't wrap my head around how to actually do these things. Before asking: yes, the content in the frame is from my site. Not cross-domain.

@yoda he meant iframe, and they are only used by insignificant companies in the websphere like Google and Facebook. — Itay Moav -Malimovka, Feb 09 '11 at 01:45
possible duplicate of [Resizing an iframe based on content](http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content) — Pablo Fernandez, Feb 09 '11 at 01:52
You've seen this GitHub project? https://github.com/house9/jquery-iframe-auto-height — jpwco, Feb 09 '11 at 01:55

score 1 · Accepted Answer · answered Feb 09 '11 at 01:51

1

Not quite sure why you want to use an iframe and not a dynamic div filled, say, via ajax, but:

Put the content within the iframe into a div, then get the height of the div. I'd suggest using jquery like so:

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

But if you can't use jquery, you should be able to use this:

document.getElementById("divId").offsetHeight;

Then you'd need to set the iframe's height to whatever you got.

jquery:

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

regular js:

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

answered Feb 09 '11 at 01:51

Val Schuman

1,798
2
18
23

3

this does not work. You can't access the iframe div from outside the iframe – Pablo Fernandez Feb 09 '11 at 01:53
4

You can, however, do this: `document.getElementById("frameId").contentWindow.document.getElementById("id")` – JCOC611 Feb 09 '11 at 01:56
@JCOC611 `document.getElementById("frameId").contentWindow.document` is forbidden to access these days, too, as far as I can see (at least in FF) – YakovL Nov 14 '16 at 23:03
@YakovL it looks like it works fine in Chrome 56.0. Make sure the main document and the iframe are on the same domain. – JCOC611 Nov 14 '16 at 23:13
@JCOC611 sorry, either missed the "Not cross-domain." part in the question or commented before figured that it doesn't work only cross-domain. There's this answer to be noted, though: http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content/362564#362564 – YakovL Nov 16 '16 at 11:41

score 0 · Answer 2 · edited Apr 04 '17 at 05:58

0

Here's a solution using jQuery:

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

edited Apr 04 '17 at 05:58

Chun

2,230
5
24
46

answered Feb 13 '14 at 12:47

Erik Bergstedt

912
10
27

score 0 · Answer 3 · answered Feb 09 '11 at 01:53

0

<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 the somthing.html, on the bottom or onload event do something on the lines of

window.parent.window.onContentChange()

answered Feb 09 '11 at 01:53

Itay Moav -Malimovka

52,579
61
190
278

When I wrote it, I was a mootools guy. – Itay Moav -Malimovka Sep 10 '16 at 01:08

score 0 · Answer 4 · answered May 04 '11 at 03:02

Render dynamically the iframe in javascript once the container element("td1") has been drawn.

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

make iframe height fit content

4 Answers4