MessagePort: message 事件
注意：此功能在 Web Workers 中可用。
当消息到达 MessagePort 对象上时，会在此对象上触发 message 事件。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("message", (event) => { })
onmessage = (event) => { }
事件类型
一个 MessageEvent。继承自 Event。
事件属性
此接口还继承了其父级 Event 的属性。
MessageEvent.data只读-
由消息发送者发送的数据。
MessageEvent.origin只读-
一个字符串，表示消息发送者的源。
MessageEvent.lastEventId只读-
一个字符串，表示事件的唯一 ID。
MessageEvent.source只读-
一个
MessageEventSource（可以是 WindowProxy、MessagePort或ServiceWorker对象），表示消息发送者。 MessageEvent.ports只读-
一个包含所有随消息发送的
MessagePort对象的数组，按顺序排列。
示例
假设一个脚本创建了一个 MessageChannel，并使用类似如下的代码将其一个端口发送到另一个浏览上下文，例如另一个 <iframe>：
js
const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const messageControl = document.querySelector("#message");
const channelMessageButton = document.querySelector("#channel-message");
channelMessageButton.addEventListener("click", () => {
myPort.postMessage(messageControl.value);
});
targetFrame.postMessage("init", targetOrigin, [channel.port2]);
目标可以使用类似如下的代码接收该端口，并开始监听其上的消息和消息错误：
js
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.addEventListener("message", (event) => {
received.textContent = event.data;
});
myPort.addEventListener("messageerror", (event) => {
console.error(event.data);
});
myPort.start();
});
请注意，侦听器必须在任何消息传递到该端口之前调用 MessagePort.start()。仅在使用 addEventListener() 方法时才需要此操作：如果接收方使用 onmessage 代替，则会自动调用 start()。
js
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.onmessage = (event) => {
received.textContent = event.data;
};
myPort.onmessageerror = (event) => {
console.error(event.data);
};
});
规范
| 规范 |
|---|
| HTML # event-message |
| HTML # handler-messageport-onmessage |
浏览器兼容性
加载中…
另见
- 相关事件：
messageerror。 - 使用通道消息