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.