PHPackages webcito/iframe-resizer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webcito/iframe-resizer ActiveLibrary[Utility & Helpers](/categories/utility) webcito/iframe-resizer ====================== A JavaScript library for dynamic iframe resizing and communication. 1.0.8(4w ago)0691MIT Since Jan 16Pushed 4w ago1 watchersCompare [ Source](https://github.com/ThomasDev-de/iFrameResizer)[ Packagist](https://packagist.org/packages/webcito/iframe-resizer)[ Docs](https://github.com/ThomasDev-de/iFrameResizer)[ RSS](/packages/webcito-iframe-resizer/feed)WikiDiscussions main Synced today READMEChangelog (9)DependenciesVersions (10)Used By (0) IFrameResizer ============= [](#iframeresizer) A lightweight JavaScript library for seamless iframe communication and automatic resizing. Features -------- [](#features) - Automatic iframe height adjustment in the parent page - Optional iframe width adjustment - Two-way communication between parent and child frames - Scroll position synchronization - Custom event handling - Ready-state detection - Origin validation for parent and child messages - Configurable logging - Singleton pattern in a child frame Installation ------------ [](#installation) Add both scripts to your project: ``` ``` Demo ---- [](#demo) Open `demo/index.html` in a browser or serve the project directory locally: ``` php -S localhost:8000 ``` Then visit `http://localhost:8000/demo/`. Usage ----- [](#usage) ### Parent Page [](#parent-page) Basic setup: ``` const resizer = new IFrameResizer('#myIframe', { targetOrigin: 'https://child-domain.com', log: true, onResize: (width, height) => { console.log(`Iframe resized to ${width}x${height}`); } }).onReady(() => { console.log('Iframe is ready!'); }); ``` By default, the parent script applies the reported child height to the iframe element. Use `autoResize: false` if you only want to receive resize events without changing iframe styles. Resize width as well as height: ``` const resizer = new IFrameResizer('#myIframe', { targetOrigin: 'https://child-domain.com', resizeWidth: true }); ``` Advanced usage with custom messages: ``` const resizer = new IFrameResizer('#myIframe', { targetOrigin: 'https://child-domain.com', log: true }); // Handle custom messages resizer.onMessage('customEvent', (payload) => { console.log('Custom event received:', payload); }); // Send message to child resizer.sendMessage('updateContent', {data: 'Hello Child!'}); ``` ### Child Page [](#child-page) Basic setup: ``` window.IFrameResizer.create({ targetOrigin: 'https://parent-domain.com', log: true }); ``` The child script waits until `document.body` is available, registers listeners, sends an initial forced `resize` event, and then sends a `ready` event. Advanced usage with custom messages: ``` const resizer = window.IFrameResizer.create({ targetOrigin: 'https://parent-domain.com', log: true }); // Handle custom messages resizer.onMessage('updateContent', (payload) => { console.log('Update received:', payload); }); // Send message to parent resizer.sendMessage('customEvent', {data: 'Hello Parent!'}); ``` Configuration Options --------------------- [](#configuration-options) ### Parent Options [](#parent-options) OptionTypeDefaultDescriptiontargetOriginstring'\*'Allowed child origin for received and sent messagesautoResizebooleantrueAutomatically apply child height to the iframeresizeWidthbooleanfalseAlso apply child width to the iframelogbooleanfalseEnable console loggingonResizefunctionnullCallback for resize eventsonScrollfunctionnullCallback for scroll events### Child Options [](#child-options) OptionTypeDefaultDescriptiontargetOriginstring'\*'Allowed parent origin for received and sent messageslogbooleanfalseEnable console loggingresizebooleantrueEnable resize tracking and resize messagesscrollbooleantrueEnable scroll trackingAPI Reference ------------- [](#api-reference) ### Parent Methods [](#parent-methods) - `onReady(callback)`: Register callback for iframe ready state - `onMessage(type, callback)`: Register custom message handler - `sendMessage(type, data)`: Send a message to child iframe - `destroy()`: Clean up event listeners ### Child Methods [](#child-methods) - `window.IFrameResizer.hasParent()`: Check if the script is running inside an iframe - `onMessage(type, callback)`: Register custom message handler - `sendMessage(type, data)`: Send a message to parent - `destroy()`: Clean up instance and listeners Events ------ [](#events) ### Built-in Events [](#built-in-events) - `ready`: Sent when child iframe is initialized - `resize`: Triggered on size changes and once during child initialization - `scroll`: Triggered on scroll position changes ### Custom Events [](#custom-events) You can define and handle custom events using `onMessage()` and `sendMessage()`. Security -------- [](#security) For production use, set `targetOrigin` on both parent and child instead of using the default `'*'`. Messages from other origins are ignored when a concrete origin is configured. Browser Support --------------- [](#browser-support) - All modern browsers (Chrome, Firefox, Safari, Edge) - Requires `ResizeObserver` support for automatic resize tracking (or polyfill) - Requires `postMessage` support License ------- [](#license) MIT License Contributing ------------ [](#contributing) Feel free to submit issues and pull requests. ### Health Score 42 ↑ FairBetter than 88% of packages Maintenance94 Actively maintained with recent releases Popularity12 Limited adoption so far Community8 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~63 days Recently: every ~100 days Total 9 Last Release 29d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (28 commits)") --- Tags iframe-resizerjavascriptjavascriptlibrarycommunicationiframeResizer ### Embed Badge ![Health badge](/badges/webcito-iframe-resizer/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-iframe-resizer/health.svg)](https://phpackages.com/packages/webcito-iframe-resizer) ``` ### Alternatives [desandro/masonry Cascading grid layout library 16.7k436.4k4](/packages/desandro-masonry)[desandro/imagesloaded JavaScript is all like \_You images done yet or what?\_ 8.9k449.7k1](/packages/desandro-imagesloaded)[tightenco/ziggy Use your Laravel named routes in JavaScript. 4.3k48.3M329](/packages/tightenco-ziggy)[matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k33.1M462](/packages/matthiasmullie-minify)[tedivm/jshrink Javascript Minifier built in PHP 76339.9M180](/packages/tedivm-jshrink)[league/iso3166 ISO 3166-1 PHP Library 69938.4M141](/packages/league-iso3166) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)