FrameMessenger Demo

This is a demonstration of the FrameMessenger library for communication between a parent document and an embedded child document via an iframe. The parent document can send messages to the child, and the child can send messages back to the parent. Additionally, the child document can automatically adjust its height based on its content, and the parent will respond to these adjustments to ensure a seamless user experience without internal scrollbars.

An example of how to create FrameMessenger to send and receive messages.

// In parent.html
const messenger = new FrameMessenger(document.getElementById('child-frame'));

// Receive messages from child (the "name" is just a string agreed upon by both sides)
messenger.receive('message-from-child', (data) => {
    console.log('Parent received:', data);
});

// Send message to child
messenger.send('message-from-parent', { text: 'Hello from parent!' });

Parent Document

This is the parent HTML document. The content below is loaded from a child document via iframe.