# iframe-resizer: Automatic iframe Resizing for Same-Domain and Cross-Domain Content > iframe-resizer is a JavaScript library that automatically resizes iframes to match their content size and monitors them for changes. It handles both same-domain and cross-domain iframes and provides an extended API for parent-iframe communication. **davidjbradshaw/iframe-resizer** — Keep iframes sized to their content - Repository: https://github.com/davidjbradshaw/iframe-resizer - Website: https://iframe-resizer.com - Stars: 6,929 · Forks: 964 - Language: JavaScript - License: NOASSERTION - Published: 2026-09-22 · Updated: 2026-09-22 · Language: en - Canonical page: https://hysenlabs.com/projects/davidjbradshaw-iframe-resizer ## The problem iframe-resizer solves The library addresses the fundamental limitation that modern browsers cannot reliably calculate page content size from outside an iframe. iframe-resizer automatically inspects the iframe's page and selects the best size value from a range of DOM measurements and its own custom content-size calculation algorithm. It then monitors the iframe and keeps it the perfect size. This is useful for embedding content you do not control, embedding forms, widgets, third-party dashboards, or content that changes dynamically. Without iframe-resizer, embedded iframes are fixed sizes, causing content to overflow or waste space. With it, they adapt automatically. ## Same-domain and cross-domain support iframe-resizer supports both internal (same-domain) and external (cross-domain) iframes via a simple JS file designed to be a zero-impact guest on hosting sites. Cross-domain iframes are the challenging case because browsers block direct DOM access between origins for security. iframe-resizer solves this by loading a small script inside the iframe that sends content size measurements to the parent page via postMessage. The parent page loads the iframe-resizer library and sets up event listeners. The child script inside the iframe measures content size and sends updates. When content changes, the child script detects it and sends the new dimensions. This design means hosting sites only need to include a minimal JavaScript file with zero configuration overhead. ## Installation and setup for multiple frameworks iframe-resizer provides setup guides for vanilla JavaScript, React, Vue, Angular, and jQuery. For vanilla JavaScript, the website at https://iframe-resizer.com/setup provides instructions. The parent page loads the iframe-resizer library and configures it for a target iframe element. Inside the iframe, a simple JS file is loaded. Framework-specific versions for React, Vue, Angular, and jQuery are available at https://iframe-resizer.com/frameworks/ with dedicated setup guides and component implementations that handle instance creation and teardown automatically. Integration guides are available for WordPress at https://iframe-resizer.com/guides/wordpress/ and Google Apps Script at https://iframe-resizer.com/guides/google_apps_script. An API guide at https://iframe-resizer.com/frameworks/api/ documents creating additional custom components. Version 5 has been extensively rewritten to use modern browser APIs, enabling better performance and more accurate detection of content-resizing events. The API has been refreshed and simplified. If upgrading from version 4, the upgrade guide explains changes and breaking improvements. ## Performance optimization through set theory To ensure minimal impact on site performance, iframe-resizer is highly optimized and uses set theory to ensure it only checks page elements that affect iframe sizing. Even on complex pages, the library can detect changes to HTML and CSS, calculate revised content dimensions, and update the iframe in sub-millisecond time. This means the library runs efficiently without polling the entire DOM constantly. Instead, it tracks which elements can affect size and only re-measures when those specific elements change. This makes iframe-resizer practical even for pages with thousands of DOM elements. ## Extended API for parent-iframe communication Beyond resizing, iframe-resizer provides missing browser API features for secure iframe-to-parent integration. These features fill the security gaps between pages. The child script can scroll the parent page in two ways: relative to the iframe's position using `scrollToOffset(x, y)` or by the viewport using `scrollBy(x, y)`. This enables scenarios where the iframe needs the parent to scroll to content. The library provides details of the parent page: the position of the iframe element, the scroll position of the parent page, and the viewport dimensions. It also fixes in-page linking within iframes by ensuring anchor links work correctly and allowing links to propagate to the parent page, enabling iframe content to trigger parent-page navigation. The parent can attach `onMouseEnter` and `onMouseLeave` events to the iframe element itself, which browsers do not normally support. Simplified message passing allows the iframe and parent to exchange data beyond what iframes normally permit. The library handles automatic domain authentication for security, verifying that both sides trust each other before allowing communication. Built-in accessibility enhancements ensure embedded content remains accessible to screen readers. When combined with viewer.js, iframe-resizer can even resize iframes containing PDF and ODF documents. ## Version 5 improvements and maintenance Version 5 represents an extensive rewrite using modern browser APIs, enabling significantly better performance and greater accuracy in detecting content-resizing events. The API has been refreshed and simplified. If you are coming from version 4, there is an upgrade guide explaining the changes. The last push was on 2026-09-22. Recent releases include v5.5.9 (2026-02-06), v5.5.8 (2026-01-26), and v5.5.7 (2025-09-23). The project is actively maintained. The library is available via npm and CDN. The copyright is held by David J. Bradshaw from 2013-25. ## Linking and PDF document support iframe-resizer fixes in-page linking within iframes by ensuring anchor links work correctly and allowing links inside the iframe to propagate to the parent page. This enables iframe content to trigger parent-page navigation without the usual cross-origin restrictions. When combined with viewer.js, iframe-resizer can even resize iframes containing PDF and ODF documents. This makes it possible to embed documents while still maintaining dynamic resizing based on content changes. The automatic domain authentication feature provides security by verifying that both the parent and iframe trust each other before allowing communication, preventing unauthorized scripts from accessing the parent page context. Version 5.5.9 from February 2026 is the current stable release. The library is actively maintained, with recent updates focused on modernization. The project provides comprehensive documentation and examples in the example/ directory, including HTML, React, and Vue setups. The source is written in ES modules and transpiled via Rollup; the built distribution includes both minified and source-mapped versions. ## Conclusion Use iframe-resizer if you embed iframes on your site and need them to resize automatically to content or if you need reliable parent-iframe communication. Do not use it if you control all iframe content and can use native browser APIs, or if you need embedded PDF viewing alone (though it can enhance viewer.js for that use case). Before deploying version 5, review the upgrade guide if you are migrating from version 4; the API has been simplified and refreshed for modern browser support. ## FAQ ### What is an iframe and why is it bad? An iframe embeds another HTML page within a page. They are problematic because browsers do not provide reliable methods to measure content size from outside the iframe, leading to overflow or wasted space. iframe-resizer solves this limitation. ### How do I resize an iframe? Use iframe-resizer by loading the parent script in the parent page and the child script inside the iframe. The library automatically detects content size and resizes the iframe, monitoring for changes. ### What is an iframe and how does it work? An iframe is an HTML element embedding another HTML page within a page. Browsers isolate it for security. iframe-resizer bridges this by having a child script measure content size and send dimensions to the parent via postMessage. ### How to use iframe resizer? Setup guides for vanilla JavaScript, React, Vue, Angular, and jQuery are available on https://iframe-resizer.com/. Load the parent library in your page and the child script in the iframe. The library handles resizing and monitoring automatically. ### What is iframe resizer? iframe-resizer is a JavaScript library that automatically resizes iframes to match their content and monitors them for changes. It supports both same-domain and cross-domain iframes and provides an extended API for parent-iframe communication. ## Sources - [davidjbradshaw/iframe-resizer on GitHub](https://github.com/davidjbradshaw/iframe-resizer) - [Issues](https://github.com/davidjbradshaw/iframe-resizer/issues) - [Project website](https://iframe-resizer.com) - [README](https://github.com/davidjbradshaw/iframe-resizer/blob/master/README.md) - [Releases](https://github.com/davidjbradshaw/iframe-resizer/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/davidjbradshaw-iframe-resizer