BroadcastChannel: messageerror 事件

Baseline 已廣泛支援

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

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

當通道上收到一條無法反序列化的訊息時,會觸發 BroadcastChannel 介面的 messageerror 事件。

語法

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

js
addEventListener("messageerror", (event) => { })

onmessageerror = (event) => { }

事件型別

一個 MessageEvent。繼承自 Event

Event MessageEvent

事件屬性

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

data 只讀

由訊息傳送者傳送的資料。

origin 只讀

一個字串,表示訊息傳送者的源。

lastEventId 只讀

一個字串,表示事件的唯一 ID。

source 只讀

一個訊息事件源,它可以是 WindowProxyMessagePortServiceWorker 物件,代表訊息的傳送者。

ports 只讀

一個 MessagePort 物件陣列,表示訊息傳送通道(如果適用,例如在通道訊息傳遞或向共享工作者傳送訊息時)關聯的埠。

示例

監聽 messageerror 事件

此程式碼使用 addEventListener() 來監聽訊息和錯誤

js
const channel = new BroadcastChannel("example-channel");

channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

channel.addEventListener("messageerror", (event) => {
  console.error(event);
});

同樣,但使用 onmessageonmessageerror 事件處理程式屬性

js
const channel = new BroadcastChannel("example-channel");

channel.onmessage = (event) => {
  received.textContent = event.data;
};

channel.onmessageerror = (event) => {
  console.log(event);
};

嘗試共享記憶體

messageerror 事件的一個常見原因是嘗試在代理叢集(agent clusters)之間傳送 SharedArrayBuffer 物件,或由其支援的緩衝區檢視。以下程式碼演示了這一點。

頁面 A 執行以下程式碼

js
const channel = new BroadcastChannel("hello");
channel.postMessage({ data: new SharedArrayBuffer(1024) });

頁面 B 執行以下程式碼

js
const channel = new BroadcastChannel("hello");
channel.addEventListener("messageerror", (event) => {
  console.error("Message error");
});

然後,當頁面 B 嘗試反序列化從頁面 A 傳送的訊息時,它將收到一個 messageerror 事件。

規範

規範
HTML
# event-messageerror
HTML
# handler-broadcastchannel-onmessageerror

瀏覽器相容性

另見