All geek questions in one place

Height adjustment IFrame Chrome only

SO I know this solution is somewhere, but I cannot find it. I delved around for a day in google and stackOverflow.

Basically, I have an iframe, and I'm trying to expand it to the size of its contents, a fairly simple task. I went through several methods, looking at different heights, etc. But for some damn reason, Chrome doesn't want to put up with me. So here is the javascript for resizing an IFrame. To make sure JS works and reads the height, I selected this part of innerHTML (sort of like debugging)

<script type="text/javascript"> function resizeFrame() { var t=document.getElementById("Footer"); var f = document.getElementById("mainContent"); var y = f.contentWindow; t.innerHTML = y.document.body.offsetHeight; f.height = y.body.offsetHeight; } </script>

Here's the iframe:

  <iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%"> Not working!</iframe>

So for some odd reason, he doesn't want to work, pretty much hates me on Chrome. But it works in Firefox and IE. Any solutions?

+4
source share
1 answer

If something is missing for me, I consider that you have a typo on the last line of your function (missing .document. )

In Chrome (18.0) the following works for me:

 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function resizeFrame() { var t=document.getElementById("Footer"); var f = document.getElementById("mainContent"); var y = f.contentWindow; t.innerHTML = y.document.body.offsetHeight; f.height = y.document.body.offsetHeight; } </script> </head> <body> <iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">Working!</iframe> <p id="Footer"> Footer</p> </body> </html>
+1
source

Source: https://habr.com/ru/post/1400120/

More articles:


All Articles