DEV Community

n350071πŸ‡―πŸ‡΅
n350071πŸ‡―πŸ‡΅

Posted on

Dynamically change the iframe height from inside

#javascript

πŸ€” Situation

Your page is embedded to an iframe which ID is parent-iframe, and you want to change the height by your page content.

 <html> <head> </head> <body> <div> <iframe src="https://your.html" id="parent-iframe"></iframe> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

πŸ¦„ Solution

Run a script from inside to the iframe, when the page is ready.

 <head> <script type="text/javascript"> $(document).ready(function() { $("#parent-iframe", window.parent.document).height(document.body.scrollHeight); }); </script> </head>
Enter fullscreen mode Exit fullscreen mode

πŸ”— Parent Note

n350071

My Javascript note ( include JQuery )

n350071πŸ‡―πŸ‡΅ ・ Oct 3 '19

#javascript

Top comments (0)