{{ APIRef("HTML DOM") }}
The MessagePort
interface of the Channel Messaging API represents one of the two ports of a {{domxref("MessageChannel")}}, allowing sending of messages from one port and listening out for them arriving at the other.
{{AvailableInWorkers}}
Methods
Inherits methods from its parent, {{domxref("EventTarget")}}
- {{domxref("MessagePort.postMessage")}}
- Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
- {{domxref("MessagePort.start")}}
- Starts the sending of messages queued on the port (only needed when using {{domxref("EventTarget.addEventListener")}}; it is implied when using {{domxref("MessagePort.onmessage")}}.)
- {{domxref("MessagePort.close")}}
- Disconnects the port, so it is no longer active.
Event handlers
Inherits event handlers from its parent, {{domxref("EventTarget")}}
- {{domxref("MessagePort.onmessage")}}
- Is an {{ domxref("EventListener") }} that is called whenever an {{domxref("MessageEvent")}} of type
message
is fired on the port — that is, when the port receives a message.
Example
In the following code block, you can see a new channel being created using the {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} constructor. When the IFrame has loaded, we transfer {{domxref("MessageChannel.port2")}} (a MessagePort
) to the IFrame using {{domxref("MessagePort.postMessage")}} along with a message. The handleMessage
handler then responds to a message being sent back from the IFrame (using {{domxref("MessagePort.onmessage")}}), putting it into a paragraph.
var channel = new MessageChannel(); var para = document.querySelector('p'); var ifr = document.querySelector('iframe'); var otherWindow = ifr.contentWindow; ifr.addEventListener("load", iframeLoaded, false); function iframeLoaded() { otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handleMessage; function handleMessage(e) { para.innerHTML = e.data; }
For a full working example, see our channel messaging basic demo on Github (run it live too).
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', '#message-ports','MessagePort')}} | {{Spec2('HTML WHATWG')}} | No difference from {{SpecName("HTML5 Web Messaging")}}. |
{{SpecName('HTML5 Web Messaging', '#message-ports','MessagePort')}} | {{Spec2('HTML5 Web Messaging')}} | W3C version of the spec |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | {{CompatNo}} | 10.0 | 10.6 | 5 |
Available in workers | {{CompatVersionUnknown}} | {{CompatGeckoDesktop(41)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 4.4 | 4 | {{CompatNo}} | {{CompatNo}} | 10.0 | 11.5 | 5.1 |
Available in workers | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatGeckoMobile(41)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |