Dynamic `iframe` height based on actual content

Question

I am trying to make an iframe that will adjust height based on actual content. I know you can't do it on cross domain but in this case it will be the same domain. I have found a solution where iframe height is set on load of src but let's say the content will change in the iframe so the iframe then should expand the height. I have created a plunker to show you what I mean.

Here is the plnuker: https://plnkr.co/edit/A6Hvmcf2drXGhHi22AWV

In this case it's just another file that I open in the iframe but let's say it would be another page. I have found following code and it works perfect in the first instance but then if the content in the iframe changes the height will stay as it was but i want it to adjust.

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

And then in html like

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

So this is actually not the solution because it only works onload.

Possible duplicate of [Adjust width height of iframe to fit with content in it](https://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it) — Krzysztof Janiszewski, May 09 '18 at 12:59
@KrzysztofJaniszewski It maybe is duplicate of question but the solution doesn't work for me at all. — SupremeDEV, May 09 '18 at 13:16
Try this https://css-tricks.com/snippets/jquery/fit-iframe-to-content/ — Krzysztof Janiszewski, May 09 '18 at 13:25

score 0 · Answer 1 · answered May 09 '18 at 13:53

0

You could use setInterval() to regularly check contentWindow.document.body.scrollHeight. That would do the job but would be pretty dirty.

answered May 09 '18 at 13:53

sad

26
6

Dynamic `iframe` height based on actual content

1 Answers1