MessagePort: 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 September 2015.

Note: This feature is available in Web Workers.

Sự kiện message được kích hoạt trên đối tượng MessagePort khi một tin nhắn đến channel đó.

Sự kiện này không thể hủy và không nổi bọt.

Cú pháp

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

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

onmessage = (event) => { }

Thuộc tính sự kiện

Giao diện này cũng kế thừa các thuộc tính từ đối tượng cha, Event.

MessageEvent.data Read only: Dữ liệu được gửi bởi nguồn phát tin nhắn.
MessageEvent.origin Read only: Một chuỗi đại diện cho nguồn gốc của nguồn phát tin nhắn.
MessageEvent.lastEventId Read only: Một chuỗi đại diện cho ID duy nhất của sự kiện.
MessageEvent.source Read only: Một MessageEventSource (có thể là đối tượng WindowProxy, MessagePort, hoặc ServiceWorker) đại diện cho nguồn phát tin nhắn.
MessageEvent.ports Read only: Một mảng chứa tất cả các đối tượng MessagePort được gửi cùng tin nhắn, theo thứ tự.

Ví dụ

Giả sử một script tạo ra một MessageChannel và gửi một trong các cổng đến một browsing context khác, chẳng hạn như một <iframe>, bằng đoạn mã như sau:

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

Đích có thể nhận cổng và bắt đầu lắng nghe các tin nhắn và lỗi tin nhắn trên đó bằng đoạn mã như sau:

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

Lưu ý rằng trình lắng nghe phải gọi MessagePort.start() trước khi bất kỳ tin nhắn nào được gửi đến cổng này. Điều này chỉ cần thiết khi dùng phương thức addEventListener(): nếu bên nhận dùng onmessage thay thế, start() được gọi ngầm:

window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

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

  myPort.onmessageerror = (event) => {
    console.error(event.data);
  };
});