`MessagePort.postMessage` contains example for `Window.postMessage`

[hannobraun]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage

What specific section or headline is this issue about?

Examples

What information was incorrect, unhelpful, or incomplete?

The Examples section for MessagePort.postMessage has an example that shows a call to postMessage whose arguments don't line up with the parameters documented above. It seems like this is actually a call to Window.postMessage.

What did you expect to see?

Either no example, or an example showing the actual use of the function documented on this page.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/messageport/postmessage
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/messageport/postmessage/index.md
• Last commit: e0310b3
• Document last modified: 2024-07-21T19:56:00.000Z

[Josh-Cena]

Hi, you need to first use Window.postMessage to pass the MessagePort to the iframe. The iframe can then use MessagePort.postMessage to send stuff back, as the code at the bottom shows.

[hannobraun]

Thank you, @Josh-Cena! I'm sorry for creating noise here by rashly opening this issue before taking the time to fully understand the example.

I do still think that the example is genuinely confusing though:

• The call to the right postMessage is somewhat hidden.
• The call to a different postMessage is more prominent (coming first, being longer, and standing out a bit more).

In addition, the use of MessagePost.postMessage that is shown is very basic, not showing any optional arguments (which is why I needed the example in the first place).

I'm just getting into this, so I'm not sure what a better example could look like. Maybe there isn't one, and the answer is to just read more carefully 🤷

[Josh-Cena]

MessagePort.postMessage is almost exactly the same as Window.postMessage, though. You use the transfer list in the same way. The only difference is you don't specify the targetURL because if you have a target handle of the port then you can already trust the receiver. You'll find more examples in Window.postMessage.

I think the current explanation for the code is sufficient to note that there are two distinct postMessage methods being used here and they are both necessary.