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)

Read next

gladiatorsbattle profile image

Building a Highly Reactive Page in React: A Deep Dive into Gladiator Crash

Gladiators Battle -

fahaddevs profile image

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Fahad Bin Faiz -

peterdanwan profile image

Testing LLM Applications: Misadventures in Mocking SDKs vs Direct HTTP Requests

Peter Wan -

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -