Install

npm i @shop25/iframe

Usage

Basic Iframe Creation

import { VisibleIframe, InvisibleIframe } from '@shop25/iframe';

const mountPoint = document.querySelector('.js-mount');

const iframe = new VisibleIframe({
    mountElement: mountPoint,
    src: `http://localhost`,
});

iframe.delete() # void;

iframe.on('windowOrCustomEventName', (event: Event | CustomEvent) => {
    console.log(event);
})

iframe.getWindow() # Window;

Cross-Window Communication with Event Buffering

The library automatically buffers events sent before the iframe is fully loaded, ensuring no messages are lost.

import { WindowClient } from '@shop25/iframe';

// Define your event interfaces
interface ParentToIframeEvents {
  navigate: (url: string) => void;
  updateData: (data: any) => void;
}

interface IframeToParentEvents {
  ready: () => void;
  dataReceived: (success: boolean) => void;
}

// Parent window code
const iframeElement = document.querySelector('iframe');
const client = new WindowClient<ParentToIframeEvents, IframeToParentEvents>(iframeElement);

// Events sent before iframe loads are automatically buffered
client.emit('navigate', '/dashboard');
client.emit('updateData', { userId: 123 });

// Listen for events from iframe
client.on('ready', () => {
  console.log('Iframe is ready!');
});

// Cleanup when done
client.destroy();

// Inside iframe code
import { IframeClient } from '@shop25/iframe';

const client = new IframeClient<IframeToParentEvents, ParentToIframeEvents>();

// Listen for events from parent
client.on('navigate', (url) => {
  console.log('Navigate to:', url);
});

client.on('updateData', (data) => {
  console.log('Received data:', data);
  client.emit('dataReceived', true);
});

// Notify parent that iframe is ready
client.emit('ready');

Event Buffering Details

• Events are automatically buffered until the iframe's load event fires
• Once loaded, buffered events are sent in order
• Subsequent events are sent immediately
• No configuration needed - buffering is automatic
• Call client.destroy() to cleanup listeners and clear buffers