Menu
I was myself searching for a simple solution to change the height of an iframe with the content in it.
It seems like the rules are that you can't get the height of the iframe from the page holding it. This is because of security apparently. How can we do this?
710
Answer: Use the contentWindow Property You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
Simple solution:
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
This works when the iframe and parent window are in the same domain. It does not work when the two are in different domains.
37
In the iframe: So that means you have to add some code in the iframe page. Simply add this script to your code IN THE IFRAME:
<body onload="parent.alertsize(document.body.scrollHeight);"> In the holding page: In the page holding the iframe (in my case with ID="myiframe") add a small javascript:
<script> function alertsize(pixels){ pixels+=32; document.getElementById('myiframe').style.height=pixels+"px"; } </script> What happens now is that when the iframe is loaded it triggers a javascript in the parent window, which in this case is the page holding the iframe.
To that JavaScript function it sends how many pixels its (iframe) height is.
The parent window takes the number, adds 32 to it to avoid scrollbars, and sets the iframe height to the new number.
That's it, nothing else is needed.
But if you like to know some more small tricks keep on reading...
DYNAMIC HEIGHT IN THE IFRAME? If you like me like to toggle content the iframe height will change (without the page reloading and triggering the onload). I usually add a very simple toggle script I found online:
<script> function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'block' ) el.style.display = 'block'; else el.style.display = 'none'; } </script> to that script just add:
<script> function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'block' ) el.style.display = 'block'; else el.style.display = 'none'; parent.alertsize(document.body.scrollHeight); // ADD THIS LINE! } </script> How you use the above script is easy:
<a href="javascript:toggle('moreheight')">toggle height?</a><br /> <div style="display:none;" id="moreheight"> more height!<br /> more height!<br /> more height!<br /> </div> For those that like to just cut and paste and go from there here is the two pages. In my case I had them in the same folder, but it should work cross domain too (I think...)
Complete holding page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>THE IFRAME HOLDER</title> <script> function alertsize(pixels){ pixels+=32; document.getElementById('myiframe').style.height=pixels+"px"; } </script> </head> <body style="background:silver;"> <iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe> </body> </html> Complete iframe code: (this iframe named "theiframe.htm")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>IFRAME CONTENT</title> <script> function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'block' ) el.style.display = 'block'; else el.style.display = 'none'; parent.alertsize(document.body.scrollHeight); } </script> </head> <body onload="parent.alertsize(document.body.scrollHeight);"> <a href="javascript:toggle('moreheight')">toggle height?</a><br /> <div style="display:none;" id="moreheight"> more height!<br /> more height!<br /> more height!<br /> </div> text<br /> text<br /> text<br /> text<br /> text<br /> text<br /> text<br /> text<br /> THE END </body> </html> Demo
185
answered Sep 17 '22 19:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With