Our volunteers haven't translated this article into Azərbaycanca yet. Join us and help get the job done!
The MessagePort
interface of the Channel Messaging API represents one of the two ports of a MessageChannel
, allowing sending of messages from one port and listening out for them arriving at the other.
Methods
Inherits methods from its parent, EventTarget
MessagePort.postMessage
- Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
MessagePort.start
- Starts the sending of messages queued on the port (only needed when using
EventTarget.addEventListener
; it is implied when usingMessagePort.onmessage
.) MessagePort.close
- Disconnects the port, so it is no longer active.
Event handlers
Inherits event handlers from its parent, EventTarget
MessagePort.onmessage
- Is an
EventListener
that is called whenever anMessageEvent
of typemessage
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 MessageChannel.MessageChannel
constructor. When the IFrame has loaded, we transfer MessageChannel.port2
(a MessagePort
) to the IFrame using MessagePort.postMessage
along with a message. The handleMessage
handler then responds to a message being sent back from the IFrame (using 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 |
---|---|---|
WHATWG HTML Living Standard The definition of 'MessagePort' in that specification. |
Living Standard | No difference from HTML5 Web Messaging. |
HTML5 Web Messaging The definition of 'MessagePort' in that specification. |
Recommendation | W3C version of the spec |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | Not supported | 10.0 | 10.6 | 5 |
Available in workers | (Yes) | 41 (41) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 4.4 | 4 | Not supported | Not supported | 10.0 | 11.5 | 5.1 |
Available in workers | (Yes) | (Yes) | 41.0 (41) | (Yes) | (Yes) | (Yes) | (Yes) |