Window: message event

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

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.

Bubbles No
Cancelable No
Interface MessageEvent
Event handler property onmessage

Examples

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}`);
};

Specifications

Specification Status
HTML Living Standard Living Standard

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
message eventChrome Full support 60Edge ? Firefox ? IE ? Opera Full support 47Safari ? WebView Android Full support 60Chrome Android Full support 60Firefox Android ? Opera Android Full support 47Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also