MessagePort: phương thức postMessage()

Cú pháp

postMessage(message)
postMessage(message, transfer)
postMessage(message, options)

Tham số

message

Tin nhắn bạn muốn gửi qua channel. Có thể là bất kỳ kiểu dữ liệu cơ bản nào. Nhiều mục dữ liệu có thể được gửi dưới dạng mảng.

Note: Các execution context có thể gửi tin nhắn cho nhau có thể không cùng agent cluster và do đó không thể chia sẻ bộ nhớ. Các đối tượng SharedArrayBuffer, hoặc buffer view dựa trên một đối tượng như vậy, không thể được gửi qua các agent cluster. Cố gắng làm vậy sẽ tạo ra sự kiện messageerror chứa DataCloneError DOMException ở phía nhận.

transfer Optional

Một mảng tùy chọn các transferable object để chuyển quyền sở hữu. Quyền sở hữu của các đối tượng này được trao cho phía đích và chúng không còn có thể sử dụng ở phía gửi. Các transferable object này phải được đính kèm vào tin nhắn; nếu không chúng sẽ được di chuyển nhưng thực tế không thể truy cập ở phía nhận.

options Optional

Một đối tượng tùy chọn chứa các thuộc tính sau:

transfer Optional

Có cùng ý nghĩa với tham số transfer.

Giá trị trả về

Không có (undefined).

Ví dụ

Trong đoạn mã dưới đây, bạn có thể thấy một channel mới được tạo bằng hàm khởi tạo MessageChannel(). Khi IFrame đã tải, chúng ta chuyển MessageChannel.port2 đến IFrame bằng window.postMessage cùng với một tin nhắn. IFrame nhận tin nhắn và gửi tin nhắn trở lại trên MessageChannel bằng postMessage(). Hàm xử lý handleMessage sau đó phản hồi tin nhắn được gửi từ iframe bằng onmessage, hiển thị vào đoạn văn. MessageChannel.port1 được lắng nghe để kiểm tra khi tin nhắn đến.

const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded);

function iframeLoaded() {
  otherWindow.postMessage("Transferring message port", "*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

// in the iframe…

window.addEventListener("message", (event) => {
  const messagePort = event.ports?.[0];
  messagePort.postMessage("Hello from the iframe!");
});

Để xem ví dụ đầy đủ đang hoạt động, hãy xem channel messaging basic demo trên GitHub (chạy trực tiếp).

Thông số kỹ thuật

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

Xem thêm

• Sử dụng channel messaging