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().