davidjbradshaw/iframe-resizer
Iframe Resizer
iframe-resizer is a JavaScript tool that automatically adjusts the dimensions of an iframe to match the size of its internal content. It functions as a cross-domain communication bridge, allowing the exchange of data and the triggering of actions between a parent window and an embedded iframe across different origins.
The project includes a nested iframe coordinator to synchronize dimensions between parent pages and inner frames, preventing scrollbars in complex nested structures. It also provides an accessibility utility to manage iframe titles and attributes, ensuring embedded content is compatible with screen readers.
The system covers a broad range of capabilities, including bidirectional JSON messaging, origin-based security filtering to restrict communication to trusted domains, and scroll synchronization for in-page anchor links. It further supports integration within component-based architectures through specialized wrappers for various frontend frameworks and jQuery.
Features
- Auto-Resizing Iframes - Automatically adjusts iframe dimensions to match internal content and prevent scrollbars.
- Iframe Content Resizers - Automatically scales an iframe's dimensions to match the size of its internal content to prevent scrollbars.
- Iframe Messaging - Uses the browser postMessage API to exchange JSON data between parent windows and guest iframes.
- Cross-Domain Coordination - Coordinates resizing and communication between parent pages and iframes across different domains.
- Iframe Message Bridges - Provides a bidirectional messaging interface for state synchronization between host and guest iframes.
- Message Bridges - Implements a messaging bridge to synchronize dimensions and exchange data between different domains.
- Domain Access Restrictions - Implements origin-based security filtering to restrict cross-domain messaging to a whitelist of trusted domains.
- Dynamic Size Calculators - Computes required iframe dimensions by analyzing the internal scroll height and width of the guest document.
- Nested Iframe Resizing - Resizes nested frame structures by communicating dimensions between parent and inner frames to prevent scrollbars.
- Minimum Dimension Calculators - Calculates the required iframe dimensions based on internal element properties to ensure a perfect content fit.
- Guest Script Architectures - Uses a guest script inside the iframe to calculate internal dimensions and report them to the parent window.
- Cross-Origin Security Policies - Validates incoming message origins against a whitelist to prevent cross-site scripting attacks.
- Recursive Resizing - Communicates size updates through a chain of parent and child frames to resolve nested iframe dimensions.
- Event-Driven Callbacks - Triggers customizable JavaScript functions on the parent page when resize or scroll events are detected.
- Iframe Accessibility Utilities - Manages iframe titles and attributes to ensure embedded content is compatible with screen readers.
- Nested Coordination - Manages size and scroll synchronization for complex structures where iframes are embedded within other iframes.
- Screen Reader Accessibility - Improves screen reader support by dynamically managing iframe titles and accessibility attributes.
- Nested Scroll Coordination - Coordinates dimensions and scrolling between parent pages and inner frames to eliminate nested scrollbars.
- Framework Integration Wrappers - Ships dedicated library wrappers that adapt iframe resizing functionality for various frontend frameworks.
- Frontend Framework Integrations - Synchronizes iframe dimensions across various JavaScript libraries using specialized frontend framework integrations.
