Skip to content

Using Message Events to Resize an IFrame

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Over the years, I've often had to embed interactive data visualizations into other websites. The simplest way to manage this has been to use iframes. The downside to using iframes is that their height doesn't automatically adjust to the size of the child content. But this problem can be solved by using window.postMessage() to tell the parent what the child's height is, allowing it to adjust the iframe's height attribute with JavaScript.

The window.postMessage() API allows you to send data from one window to another across domains. With postMessage, the embedded iframe site is able to send data to the parent window. Scripts in the parent window can then listen for the message event, and take action based on the data sent.

In this example, I'm sending a message from a child window in an iframe to a parent window with the clientHeight of the child's content. The parent window is using that information to adjust the height of the iframe. Every time you ADD or REMOVE a box in the child window, it sends a new message to the parent with the updated height. Click here to see it in action.

Dynamically Resizing IFrame

First, a script in the child window checks the height of itself, and then sends that height information to the parent window.

const app = document.querySelector('.resizing-app');
const height = app.clientHeight;
window.parent.postMessage(
  { height },
  'https://child-window-origin.com'
);

The script in the parent window creates the iframe, adds it to the document, and then listens to the message event. If it receives a message from the expected source, it will read the message data and update the iframe height.

let container = document.querySelector('#target');
const iframe = document.createElement('iframe');

window.addEventListener('load', () => {
  container.appendChild(iframe);
});

window.addEventListener(
  'message',
  function(e) {
    if (!event.origin.match('child-window-origin.com')) {
      return;
    }

    let message = e.data;

    if (message.height) {
      iframe.height = message.height + 'px';
    }
  },
  false
);

If you've got an app to embed where the height might change independently of any specific action, you can also use setInterval to poll for height changes, and send them on a regular basis. Here is an example of the same app, but the boxes are created and destroyed at random, and polling is used to check the height at regular intervals.

If you'd like to learn more about the postMessage API, more detailed information can be found on MDN.

Live Demo

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co