HTML | DOM onmessage 事件

介绍

onmessage 事件是 HTML DOM 中的一个事件，用于在 Web Workers、其他浏览器 tab 或 iframe 间的跨窗口通信中接收消息。

当在另一个窗口中使用 postMessage() 方法发送消息时，onmessage 事件可以使 JavaScript 定义的函数在接收到消息时被调用。这可以帮助实现一些复杂的交互，例如将信息传递给其他窗口进行处理，或在不同的文档之间同步数据。

语法

window.onmessage = function(event) { ... };

参数

event

在接收到消息时，传递给函数的事件对象包含以下属性：

• data：从其他窗口传递的数据。
• origin：发送消息的窗口的地址，作为 URL 字符串。
• source：发送消息的窗口。

示例

以下是一个发送消息并在另一个窗口中接收消息的示例：

// 1. 在页面中添加一个 iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
document.body.appendChild(iframe);

// 2. 监听 onmessage 事件
window.onmessage = function(event) {
  // 3. 接收来自 iframe 窗口的数据
  if (event.origin === 'https://example.com') {
    console.log(event.data);
  }
};

// 4. 发送数据到 iframe 窗口
const data = { type: 'greeting', message: 'hello' };
iframe.contentWindow.postMessage(data, 'https://example.com');

在上述示例中，我们首先在页面中添加一个 iframe，然后通过监听 onmessage 事件来接收来自 iframe 窗口的消息。最后，我们使用 postMessage() 方法向 iframe 窗口发送数据。