MessagePort - Web APIs | MDN * Skip to main content * Skip to search HTML HTML: Markup language HTML reference * Elements * Global attributes * Attributes * See all… HTML guides * Responsive images * HTML cheatsheet * Date & time formats * See all… Markup languages * SVG * MathML * XML CSS CSS: Styling language CSS reference * Properties * Selectors * At-rules * Values * See all… CSS guides * Box model * Animations * Flexbox * Colors * See all… Layout cookbook * Column layouts * Centering an element * Card component * See all… JavaScript JS JavaScript: Scripting language JS reference * Standard built-in objects * Expressions & operators * Statements & declarations * Functions * See all… JS guides * Control flow & error handing * Loops and iteration * Working with objects * Using classes * See all… Web APIs Web APIs: Programming interfaces Web API reference * File system API * Fetch API * Geolocation API * HTML DOM API * Push API * Service worker API * See all… Web API guides * Using the Web animation API * Using the Fetch API * Working with the History API * Using the Web speech API * Using web workers All All web technology Technologies * Accessibility * HTTP * URI * Web extensions * WebAssembly * WebDriver * See all… Topics * Media * Performance * Privacy * Security * Progressive web apps Learn Learn web development Frontend developer course * Getting started modules * Core modules * MDN Curriculum * Check out the video course from Scrimba, our partner Learn HTML * Structuring content with HTML module Learn CSS * CSS styling basics module * CSS layout module Learn JavaScript * Dynamic scripting with JavaScript module Tools Discover our tools * Playground * HTTP Observatory * Border-image generator * Border-radius generator * Box-shadow generator * Color format converter * Color mixer * Shape generator About Get to know MDN better * About MDN * Advertise with us * Community * MDN on GitHub Blog Toggle sidebar * Web * Web APIs * MessagePort Theme * OS default * Light * Dark English (US) Remember language Learn more * Deutsch * English (US) * 日本語 * 中文 (简体) MessagePort Baseline Widely available This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * See full compatibility * Learn more Note: This feature is available in Web Workers . The MessagePort interface of the Channel Messaging API represents one of the two ports of a MessageChannel , allowing messages to be sent from one port and listening out for them arriving at the other. MessagePort is a transferable object . In this article * Instance methods * Events * Example * Specifications * Browser compatibility * See also Instance methods Inherits methods from its parent, EventTarget . postMessage() Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts. start() Starts the sending of messages queued on the port (only needed when using EventTarget.addEventListener ; it is implied when using onmessage ). close() Disconnects the port, so it is no longer active. Events Inherits events from its parent, EventTarget . message Fired when a MessagePort object receives a message. messageerror Fired when a MessagePort object receives a message that can't be deserialized. Example In the following example, you can see a new channel being created using the MessageChannel() constructor. When the IFrame has loaded, we register an onmessage handler for MessageChannel.port1 and transfer MessageChannel.port2 to the IFrame using the window.postMessage method along with a message. When a message is received back from the IFrame, the onMessage function outputs the message to a paragraph. js const channel = new MessageChannel(); const output = document.querySelector(".output"); const iframe = document.querySelector("iframe"); // Wait for the iframe to load iframe.addEventListener("load", onLoad); function onLoad() { // Listen for messages on port1 channel.port1.onmessage = onMessage; // Transfer port2 to the iframe iframe.contentWindow.postMessage("Hello from the main page!", "*", [ channel.port2, ]); } // Handle messages received on port1 function onMessage(e) { output.innerHTML = e.data; } For a full working example, see our channel messaging basic demo on GitHub ( run it live too ). Specifications Specification HTML # message-ports Browser compatibility See also * Using channel messaging Help improve MDN Yes No Learn how to contribute This page was last modified on Mar 6, 2024 by MDN contributors . View this page on GitHub • Report a problem with this content Clear filter input * Channel Messaging API * MessagePort * Instance methods * close() * postMessage() * start() * Events * message * messageerror * Inheritance * EventTarget * Related pages for Channel Messaging API * MessageChannel * Guides * Using channel messaging Your blueprint for a better internet. * * * * * MDN * About * Blog * Mozilla careers * Advertise with us * MDN Plus * Product help Contribute * MDN Community * Community resources * Writing guidelines * MDN Discord * MDN on GitHub Developers * Web technologies * Learn web development * Guides * Tutorials * Glossary * Hacks blog * Website Privacy Notice * Telemetry Settings * Legal * Community Participation Guidelines Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license .