https://github.com/thomasdev-de/iframeresizer
A simple JavaScript library for resizing iframes and communicating scroll events to the parent window.
https://github.com/thomasdev-de/iframeresizer
iframe-resizer javascript
Last synced: 4 months ago
JSON representation
A simple JavaScript library for resizing iframes and communicating scroll events to the parent window.
- Host: GitHub
- URL: https://github.com/thomasdev-de/iframeresizer
- Owner: ThomasDev-de
- License: mit
- Created: 2025-01-15T20:14:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-30T06:13:04.000Z (about 1 year ago)
- Last Synced: 2025-10-27T00:51:55.198Z (8 months ago)
- Topics: iframe-resizer, javascript
- Homepage:
- Size: 47.9 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# IFrameResizer
A lightweight JavaScript library for seamless iframe communication and automatic resizing.
## 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
Add both scripts to your project:
```html
```
## Usage
### Parent Page
Basic setup:
```javascript
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:
```javascript
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
Basic setup:
```javascript
window.IFrameResizer.create({
log: true
});
```
Advanced usage with custom messages:
```javascript
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
### Parent Options
| Option | Type | Default | Description |
|--------------|----------|---------|--------------------------------|
| targetOrigin | string | '*' | Allowed origin for postMessage |
| log | boolean | false | Enable console logging |
| onResize | function | null | Callback for resize events |
| onScroll | function | null | Callback for scroll events |
### Child Options
| Option | Type | Default | Description |
|--------------|---------|---------|--------------------------------|
| targetOrigin | string | '*' | Allowed origin for postMessage |
| log | boolean | false | Enable console logging |
| resize | boolean | true | Enable auto-resizing |
| scroll | boolean | true | Enable scroll tracking |
## API Reference
### 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
- `onMessage(type, callback)`: Register custom message handler
- `sendMessage(type, data)`: Send a message to parent
- `destroy()`: Clean up instance and listeners
## Events
### Built-in Events
- `ready`: Sent when child iframe is initialized
- `resize`: Triggered on size changes
- `scroll`: Triggered on scroll position changes
### Custom Events
You can define and handle custom events using `onMessage()` and `sendMessage()`.
## Browser Support
- All modern browsers (Chrome, Firefox, Safari, Edge)
- Requires `ResizeObserver` support (or polyfill)
- Requires `postMessage` support
## License
MIT License
## Contributing
Feel free to submit issues and pull requests.