BroadcastChannel: message 事件

Baseline 已廣泛支援

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2022 年 3 月起，它已在各瀏覽器中可用。

注意：此功能在 Web Workers 中可用。

BroadcastChannel 介面的 message 事件在透過該通道接收到訊息時觸發。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

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

onmessage = (event) => { }

事件型別

一個 MessageEvent。繼承自 Event。

事件屬性

除了下面列出的屬性之外，父介面 Event 的屬性也可使用。

data 只讀: 由訊息傳送者傳送的資料。
origin 只讀: 一個字串，表示訊息傳送者的源。
lastEventId 只讀: 一個字串，表示事件的唯一 ID。
source 只讀: 一個訊息事件源，它可以是 WindowProxy、MessagePort 或 ServiceWorker 物件，用於表示訊息的傳送者。
ports 只讀: 一個 MessagePort 物件陣列，表示訊息傳送通道（如果適用，例如在通道訊息傳遞或向共享工作者傳送訊息時）關聯的埠。

示例

在此示例中，有一個“傳送者” <iframe>，當用戶單擊按鈕時，它會廣播 <textarea> 的內容。有兩個“接收者” iframe 監聽廣播訊息，並將結果寫入 <div> 元素。

傳送者

<h1>Sender</h1>
<label for="message">Type a message to broadcast:</label><br />
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Broadcast message</button>

body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 150px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

textarea {
  padding: 0.2rem;
}

label,
br {
  margin: 0.5rem 0;
}

button {
  vertical-align: top;
  height: 1.5rem;
}

const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");

broadcastMessageButton.addEventListener("click", () => {
  channel.postMessage(messageControl.value);
});

接收者 1

<h1>Receiver 1</h1>
<div id="received"></div>

body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

接收者 2

<h1>Receiver 2</h1>
<div id="received"></div>

body {
  border: 1px solid black;
  padding: 0.5rem;
  height: 100px;
  font-family: "Fira Sans", sans-serif;
}

h1 {
  font:
    1.6em "Fira Sans",
    sans-serif;
  margin-bottom: 1rem;
}

const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

結果

規範

規範
HTML # event-message
HTML # handler-broadcastchannel-onmessage

瀏覽器相容性

另見

相關事件：messageerror。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年5月2日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題