MessagePort: message event

The message event is fired on a MessagePort object when a message arrives on that channel.

Bubbles No
Cancelable No
Interface MessageEvent
Event handler property onmessage


Suppose a script creates a MessageChannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this:

const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame =[1];
const targetOrigin = '';

const messageControl = document.querySelector('#message');
const channelMessageButton = document.querySelector('#channel-message');

channelMessageButton.addEventListener('click', () => {

targetFrame.postMessage('init', targetOrigin, [channel.port2]);

The target can receive the port and start listening for messages on it using code like this:

window.addEventListener('message', (event) => {
    const myPort = event.ports[0];

    myPort.addEventListener('message', (event) => {
        received.textContent =;


Note that the listener must call MessagePort.start() before any messages will be delivered to this port. This is only needed when using the addEventListener() method: if the receiver uses onmessage instead, start() is called implicitly:

window.addEventListener('message', (event) => {
    const myPort = event.ports[0];

    myPort.onmessage = (event) => {
        received.textContent =;


Specification Status
HTML Living Standard Living Standard

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
message eventChrome Full support 4Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android No support NoOpera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android Full support 1.0


Full support  
Full support
No support  
No support

See also