Automatically resize an iframe when its content height changes

Written byPhuoc Nguyen

#Markup

Let's start by attaching the ID attribute to the iframe. This way, we can easily reference the iFrame element later on. It's worth noting that there are no `max-height` or `height` properties being used here.

<iframe id="frame">
    ...
</iframe>

To retrieve the reference to the iframe, we can use the `getElementById` function.

document.addEventListener('DOMContentLoaded', () => {
    const iframeEle = document.getElementById('frame');
});

#Automatically adjusting iFrame height

To make sure an iFrame's height automatically adjusts when its content changes, we first need to track when the content changes size.

One of the best ways to do this is by using the ResizeObserver API, which is available in modern browsers. This API allows you to observe changes to an element's size. By creating a new `ResizeObserver` instance and passing in a callback function that will be called whenever there are changes to the size of the tracked element, we can easily keep track of any changes that occur within the iFrame.

For example, if we want to track the size of an iFrame's body, we can use this code:

const iframeBody = iframeEle.contentDocument.body;

const ro = new ResizeObserver(function() {
  // Called when the body size changes
});

ro.observe(iframeBody);

Here, we create a new `ResizeObserver` instance that triggers a callback function whenever there are changes to the size of the element being tracked. We then pass the iFrame's body to the `observe()` function to start tracking its size.

Within the callback function, we can dynamically update the height of the iFrame. This allows us to keep the iFrame's size in sync with the content it displays.

const ro = new ResizeObserver(function() {
    iframeEle.style.height = `${iframeBody.scrollHeight}px`;
});

The `iframeBody.scrollHeight` property gives you the height of everything inside the iFrame, including margins, padding, and borders.

#Conclusion

By following these simple steps, you can easily adjust the height of an iFrame to fit its content using JavaScript and the DOM. This technique is incredibly useful for creating responsive web pages that automatically adjust to the size of their content.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.