davidjbradshaw/iframe-resizer

★ 6,922JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((iframe-resizer))
    Problem solved
      Auto height sizing
      Cross-domain support
      No fixed heights
    Features
      Two-way messaging
      Scroll control
      Mouse events
    Frameworks
      Vanilla JS
      React
      Vue and Angular
    How it works
      Parent script
      Child companion script
      Safe cross-origin bridge

mindmap root((iframe-resizer)) Problem solved Auto height sizing Cross-domain support No fixed heights Features Two-way messaging Scroll control Mouse events Frameworks Vanilla JS React Vue and Angular How it works Parent script Child companion script Safe cross-origin bridge

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Embed a third-party page in an iframe that automatically grows or shrinks to fit its content instead of showing a fixed-height scrollbox.

USE CASE 2

Add two-way messaging between an embedded cross-domain iframe and the parent page so each can react to the other's events.

USE CASE 3

Let content inside an iframe scroll the outer page, read the parent's scroll position, or trigger navigation links outside the iframe.

Tech stack

JavaScriptReactVueAngularjQuery

Getting it running

Difficulty · easy Time to first run · 30min

The companion script must also be loaded on the embedded (child) page for cross-domain resizing to work, both sides need setup.

No explicit license terms were provided in the explanation, check the repository before using commercially.

In plain English

iframe-resizer is a JavaScript library that solves a common problem when embedding content from one website inside another using an iframe. An iframe is an HTML element that loads a separate web page inside a box on your page. The trouble is that browsers cannot automatically size that box to fit the content inside it, so iframes either get fixed heights that leave awkward gaps or cut off content. This library detects the actual size of the embedded content and continuously adjusts the iframe box to match. It handles the tricky case where the embedded page lives on a completely different domain, which normally blocks cross-site communication for security reasons. The library works around this by including a small companion script on the embedded page, which acts as a lightweight guest that reads the content size and reports it back to the parent page safely. Beyond just resizing, the library adds communication features that browsers do not provide natively. Code running inside the iframe can scroll the outer page, receive the outer page's current scroll position and visible area dimensions, send and receive messages with the parent, and trigger navigation links to propagate outside the iframe. Mouse enter and leave events are also exposed on the iframe element, which browsers normally omit. The library works with plain JavaScript and also has first-party packages for React, Vue, Angular, and jQuery. Setup guides cover WordPress and Google Apps Script integrations as well. Version 5 was a significant rewrite using modern browser APIs, bringing performance improvements and more accurate detection of content size changes. The project has been maintained since 2013.

Copy-paste prompts

Prompt 1

Using iframe-resizer, embed a cross-domain form inside an iframe on my page and make it auto-resize as the form content changes. Show the setup for both parent and child pages.

Prompt 2

I want a React component that wraps an iframe and uses iframe-resizer to keep the height in sync with its content. Write the component.

Prompt 3

My embedded iframe needs to send a message to the parent page when a user submits a form inside it. Show me how to use iframe-resizer's message-passing API.

Prompt 4

Help me use iframe-resizer's scroll API so that clicking a link inside an embedded cross-domain iframe scrolls the outer page to a specific position.

Open on GitHub → Explain another repo

← davidjbradshaw on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.