Auto-Resize iFrame Height on Content Change – iFrame Adjuster

iFrame Adjuster is a lightweight (~2kb) JavaScript plugin that automatically resizes the height of <iframe> elements when their content changes.

It works by establishing a postMessage communication channel between the parent page and each embedded frame. This makes your iframes always match their content height.

Features:

• Works across every [data-iframe-adjust] element on the page in a single call.
• Detects when an iframe reloads (such as after a form submit) and re-measures automatically.
• Uses the postMessage API with a namespaced key to communicate height data between page and frame.
• Polls content height on each animation frame for smooth, continuous updates.

Use Cases:

• Payment forms or multi-step wizards that change height as users progress through steps.
• Iframes containing dynamic charts or data tables that expand/collapse sections based on user interaction.
• Third-party widgets that load responsive content at different breakpoints.
• PDF viewers or document editors where content length varies based on zoom level or page navigation.

How To Use It:

1. Install iframe-adjuster and import it into your entry file:

# NPM
$ npm install iframe-adjuster

import 'iframe-adjuster';

2. Load the minified build directly from the local.

<script src="/dist/iframe-adjuster.min.js"></script>

3. Add the data-iframe-adjust attribute to every <iframe> you want the plugin to manage.

The plugin assigns each frame a unique internal ID (frame-1, frame-2, etc.) stored in a data-iframe-id attribute. You do not need to set this manually.

<!-- The data-iframe-adjust attribute flags this element for the plugin -->
<iframe data-iframe-adjust src="contact-form.html" frameborder="0"></iframe>

<!-- You can mark multiple iframes on the same page -->
<iframe data-iframe-adjust src="newsletter-signup.html" frameborder="0"></iframe>

4. Call iFrameAdjuster() once on the parent page.

You do not call iFrameAdjuster() from inside the iframe. The plugin loads in both contexts and detects automatically which side it is on. In the frame, it enters “child mode” and starts reporting height. On the parent page, it enters “host mode” and starts listening.

document.addEventListener("DOMContentLoaded", () => {
  iFrameAdjuster();
});

5. Useful tips:

• Set width: 100%; border: none; on the iframe element via CSS. The plugin only manages height.
• The plugin fires a load event listener on each marked iframe. If your iframe loads via JavaScript after the page is ready, call iFrameAdjuster() after you inject the iframe into the DOM.
• The initial iframe height in HTML can be set to 0 or left at the browser default. The plugin overrides it on the first animation frame.

Alternatives:

• Responsive Iframe: A super tiny jQuery plugin which makes iframe embedded content (YouTube/Vimeo videos, external pages) fully responsive and maintains the specific ratio on window resize.
• CSS aspect-ratio: For iframes that embed content at a fixed ratio (such as videos), a pure CSS solution using aspect-ratio or the padding-bottom hack covers the need with zero JavaScript.

FAQs:

Q: Does the plugin work with cross-origin iframes?
A: The postMessage call is sent with "*" as the target origin, so it sends across origins. The receiving frame still needs to load the iFrame Adjuster script. If your CSP policy restricts postMessage, you need to update your headers to permit it.

Q: Will the plugin conflict with other postMessage listeners on my page?
A: No. Every message the plugin sends includes a key: "iframe-adjuster" property. The event handlers check for this key at the top of the callback and return early for any message that does not match.

Q: Does it support iframes that load content dynamically via JavaScript (SPA routes)?
A: Yes, with a caveat. The requestAnimationFrame loop runs continuously and picks up height changes regardless of what triggered them, including client-side route changes.

The post Auto-Resize iFrame Height on Content Change – iFrame Adjuster appeared first on CSS Script.