Categories
JavaScript Answers

How to auto-size an iFrame with JavaScript?

Spread the love

Sometimes, we want to auto-size an iFrame with JavaScript.

In this article, we’ll look at how to auto-size an iFrame with JavaScript.

How to auto-size an iFrame with JavaScript?

To auto-size an iFrame with JavaScript, we set the iframe’s width and height to the body’s dimensions.

For instance, we write

parent.document.getElementById("the-iframe-id").style.height =
  document.body.offsetHeight + "px";

to get the iframe with getElementById.

We set its style.height property to the body’s height to change its height to the body’s height.

We get the body’s height in pixels with document.body.offsetHeight.

Conclusion

To auto-size an iFrame with JavaScript, we set the iframe’s width and height to the body’s dimensions.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *