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。 - 使用通道訊息