Automatically Resize an iframe to Fit Its Content: Modern JavaScript Approaches

The HTML <iframe> element makes it easy to embed another webpage inside your own, but it comes with one long-standing limitation:

Its height does not automatically adjust to match its content.

This often results in one of two problems:

• Large empty space below the embedded content
• Internal scrollbars appearing inside the iframe

Neither provides a great user experience.

Fortunately, modern browsers provide several reliable techniques depending on your architecture.

Typical use cases include:

• Customer portals
• Embedded dashboards
• Booking systems
• Payment pages
• Documentation sites
• Internal admin applications
• Reports and analytics
• WordPress plugin previews

In all these cases, the iframe’s content may grow or shrink dynamically.

If both pages belong to the same domain, resizing is straightforward because JavaScript can access the iframe’s document.

Example:

const iframe = document.getElementById('dashboard');

iframe.onload = function () {
    iframe.style.height =
        iframe.contentDocument.body.scrollHeight + 'px';
};

This works because both documents share the same origin.

However, it only measures the height once.

Content rarely stays the same after the page loads.

Images load.

AJAX updates.

Vue components render.

Tables expand.

Instead of checking only once, modern browsers support ResizeObserver, allowing the embedded page to detect size changes automatically.

Example:

new ResizeObserver(() => {

    const height = document.body.scrollHeight;

}).observe(document.body);

Whenever the page changes size, the observer runs automatically.

Things become more complicated when embedding another domain.

For example:

www.example.com
↓
portal.example.net

The browser’s Same-Origin Policy prevents JavaScript from reading:

iframe.contentDocument

This is intentional and protects users from cross-site attacks.

window.parent.postMessage({

    type: 'resize',

    height: document.body.scrollHeight

}, 

window.addEventListener('message', function(event){

    if(event.origin !== 'https://portal.example.net'){
        return;
    }

    iframe.style.height =
        event.data.height + 'px';

});

This has become the standard solution for secure cross-origin resizing. Always verify event.origin before trusting incoming messages.

This is the approach I recommend today.

The iframe:

• watches its own content
• detects every size change
• sends updated height to the parent

The parent simply adjusts the iframe height.

Advantages:

• no polling
• no timers
• no unnecessary DOM reads
• works with dynamic content

This pattern is ideal for dashboards, SPAs, and applications where content changes frequently.

Suppose you’re embedding:

• YouTube
• Google Maps
• Stripe Checkout
• Third-party SaaS
• Another vendor’s application

You cannot inject JavaScript into those pages.

In this situation:

• you cannot reliably auto-resize the iframe
• the embedded application must expose its own resizing mechanism
• or you’ll need to use a fixed height

This is a browser security restriction—not a JavaScript limitation.

If you’re building a reusable solution, consider using iframe-resizer.

It handles:

• same-origin
• cross-origin
• dynamic content
• images loading
• font changes
• MutationObserver integration
• ResizeObserver integration
• browser quirks

Instead of maintaining custom resizing code, many production applications use this library.

setInterval()

Constant polling wastes resources.

Prefer event-driven approaches.

Never accept every postMessage().

Always verify:

event.origin

before processing incoming messages.

Avoid:

<iframe height="800">

unless the content is genuinely static.

In projects I’ve developed, automatic iframe resizing has been useful for:

• Customer portals embedded inside marketing websites
• Analytics dashboards
• Business reporting applications
• Third-party integrations
• Internal administration systems
• Embedded booking and ordering interfaces

In each case, the goal was the same: provide a seamless experience where the embedded application feels like part of the parent website rather than an isolated page.

When implementing iframe auto-height:

• Use direct DOM access only for same-origin iframes.
• Prefer ResizeObserver for dynamic layouts.
• Use postMessage() for cross-origin communication.
• Always validate event.origin.
• Avoid polling with timers.
• Consider a mature library for reusable or enterprise-grade solutions.

Automatically resizing an iframe isn’t simply about adjusting a CSS property—it’s about understanding browser security boundaries.

If both pages share the same origin, modern browser APIs make resizing straightforward.

If they don’t, window.postMessage() provides a secure and reliable communication channel between the embedded page and its parent.

Choosing the appropriate technique results in cleaner interfaces, better performance, and a more polished user experience.