MessagePort
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.
メモ: この機能はウェブワーカー内で利用可能です。
MessagePort
はチャンネルメッセージング API のインターフェイスで、MessageChannel
の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。
MessagePort
は移譲可能オブジェクトです。
インスタンスメソッド
親である EventTarget
からの継承したメソッドがあります。
postMessage()
-
ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他の閲覧コンテキストへ転送します。
start()
-
ポート上で順番待ちのメッセージの送信を開始します。(
EventTarget.addEventListener
を使用する場合のみ必要です。onmessage
を使用する場合は暗黙に実行されます。) close()
-
ポートとの接続を切断し、このポートはアクティブではなくなります。
イベント
親である EventTarget
から継承したイベントがあります。
message
-
MessagePort
オブジェクトがメッセージを受信したときに発行されます。 messageerror
-
MessagePort
オブジェクトがデシリアライズできないメッセージを受け取ったときに発行されます。
例
次の例では、MessageChannel()
コンストラクターで作成された新しいチャンネルがあります。
IFrame が読み込まれると、onmessage
ハンドラーを MessageChannel.port1
に登録し、MessageChannel.port2
を IFrame に、メッセージと共に window.postMessage
を使用して送信します。
IFrame からメッセージが返却されると。onMessage
関数でメッセージを段落に出力します。
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage("Hello from the main page!", "*", [
channel.port2,
]);
}
// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
}
完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。
仕様書
Specification |
---|
HTML Standard # message-ports |
ブラウザーの互換性
BCD tables only load in the browser