Window: message event

The message event is fired on a Window object when the window receives a message, for example from a call to Window.postMessage() from another browsing context.

Suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this:

const targetFrame = window.top.frames[1];
const targetOrigin = 'https://example.org';
const windowMessageButton = document.querySelector('#window-message');

windowMessageButton.addEventListener('click', () => {
    targetFrame.postMessage('hello there', targetOrigin);
});

The receiver can listen for the message using addEventListener() with code like this:

window.addEventListener('message', (event) => {
    console.log(`Received message: ${event.data}`);
});

Alternatively the listener could use the onmessage event handler property:

window.onmessage = (event) => {
    console.log(`Received message: ${event.data}`);
};

• Related events: messageerror.
• Window.postMessage().