iframe-resizer

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.