Window：message 事件
当窗口接收到消息时，例如来自另一个浏览上下文调用 Window.postMessage() 的消息时，会在 Window 对象上触发 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对象数组，表示消息发送通道（如果适用，例如在通道消息传递或向共享工作者发送消息时）关联的端口。
示例
假设一个脚本使用类似如下的代码向另一个浏览上下文（例如另一个 <iframe>）发送消息：
js
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");
windowMessageButton.addEventListener("click", () => {
targetFrame.postMessage("hello there", targetOrigin);
});
接收者可以使用 `addEventListener()` 并使用类似如下的代码来监听消息：
js
window.addEventListener("message", (event) => {
console.log(`Received message: ${event.data}`);
});
或者，监听器也可以使用 `onmessage` 事件处理程序属性：
js
window.onmessage = (event) => {
console.log(`Received message: ${event.data}`);
};
规范
| 规范 |
|---|
| HTML # event-message |
| HTML # handler-window-onmessage |
浏览器兼容性
加载中…
另见
- 相关事件：
messageerror。 Window.postMessage().