README

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:

<!-- In parent page -->
<script src="/dist/iframe-resizer-parent.min.js"></script>

<!-- In child page -->
<script src="/dist/iframe-resizer-child.min.js"></script>

Usage

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

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

Parent Options

Child Options

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.