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.7(1y ago)0561MIT

Since Jan 16Pushed 1y 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 1mo ago

READMEChangelog (8)DependenciesVersions (9)Used By (0)

IFrameResizer
=============

[](#iframeresizer)

A lightweight JavaScript library for seamless iframe communication and automatic resizing.

Features
--------

[](#features)

- Automatic iframe height and width adjustment
- Two-way communication between parent and child frames
- Scroll position synchronization
- Custom event handling
- Ready-state detection
- Configurable logging
- Singleton pattern in a child frame

Installation
------------

[](#installation)

Add both scripts to your project:

```

```

Usage
-----

[](#usage)

### Parent Page

[](#parent-page)

Basic setup:

```
const resizer = new IFrameResizer('#myIframe', {
    log: true,
    onResize: (width, height) => {
        console.log(`Iframe resized to ${width}x${height}`);
    }
}).onReady(() => {
    console.log('Iframe is ready!');
});
```

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({
    log: true
});
```

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 origin for postMessagelogbooleanfalseEnable console loggingonResizefunctionnullCallback for resize eventsonScrollfunctionnullCallback for scroll events### Child Options

[](#child-options)

OptionTypeDefaultDescriptiontargetOriginstring'\*'Allowed origin for postMessagelogbooleanfalseEnable console loggingresizebooleantrueEnable auto-resizingscrollbooleantrueEnable 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)

- `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
- `scroll`: Triggered on scroll position changes

### Custom Events

[](#custom-events)

You can define and handle custom events using `onMessage()` and `sendMessage()`.

Browser Support
---------------

[](#browser-support)

- All modern browsers (Chrome, Firefox, Safari, Edge)
- Requires `ResizeObserver` support (or polyfill)
- Requires `postMessage` support

License
-------

[](#license)

MIT License

Contributing
------------

[](#contributing)

Feel free to submit issues and pull requests.

###  Health Score

29

—

LowBetter than 59% of packages

Maintenance48

Moderate activity, may be stable

Popularity9

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity43

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 ~15 days

Recently: every ~0 days

Total

8

Last Release

384d 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 (22 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.7k424.4k1](/packages/desandro-masonry)[desandro/imagesloaded

JavaScript is all like \_You images done yet or what?\_

8.9k439.0k1](/packages/desandro-imagesloaded)[tightenco/ziggy

Use your Laravel named routes in JavaScript.

4.3k41.6M267](/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.0k30.5M336](/packages/matthiasmullie-minify)[tedivm/jshrink

Javascript Minifier built in PHP

76037.7M139](/packages/tedivm-jshrink)[league/iso3166

ISO 3166-1 PHP Library

70036.3M116](/packages/league-iso3166)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)