BroadcastChannel: sự kiện message

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Note: This feature is available in Web Workers.

Sự kiện message của giao diện BroadcastChannel được kích hoạt khi một thông điệp đến trên kênh đó.

Cú pháp

Dùng tên sự kiện này trong các phương thức như addEventListener(), hoặc thiết lập một thuộc tính xử lý sự kiện.

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

onmessage = (event) => { }

Thuộc tính sự kiện

Ngoài các thuộc tính được liệt kê bên dưới, còn có các thuộc tính từ giao diện cha Event.

data Read only: Dữ liệu được bộ phát thông điệp gửi đi.
origin Read only: Một chuỗi biểu diễn nguồn gốc của bộ phát thông điệp.
lastEventId Read only: Một chuỗi biểu diễn mã nhận dạng duy nhất của sự kiện.
source Read only: Một nguồn sự kiện thông điệp, là một đối tượng WindowProxy, MessagePort hoặc ServiceWorker biểu diễn bộ phát thông điệp.
ports Read only: Một mảng các đối tượng MessagePort biểu diễn các cổng gắn với kênh mà thông điệp đang được gửi qua (khi phù hợp, ví dụ trong channel messaging hoặc khi gửi thông điệp tới shared worker).

Trong ví dụ này có một <iframe> "sender" phát đi nội dung của một <textarea> khi người dùng nhấn nút. Có hai iframe "receiver" lắng nghe thông điệp quảng bá và ghi kết quả vào một phần tử <div>.

Sender

<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);
});

Receiver 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;
});

Receiver 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;
});

Kết quả

Thông số kỹ thuật

Specification
HTML # event-message
HTML # handler-broadcastchannel-onmessage

Tương thích trình duyệt

Xem thêm

Sự kiện liên quan: messageerror.

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content