Window：消息事件

当窗口接收到消息时，例如从另一个浏览上下文中调用 Window.postMessage() 时，会在 Window 对象上触发 message 事件。

此事件不可取消，也不冒泡。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("message", (event) => {});

onmessage = (event) => {};

事件类型

一个 MessageEvent。继承自 Event。

Event MessageEvent

事件属性

此接口还继承其父级 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅