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.

* Some parts of this feature may have varying levels of support.

メモ: この機能はウェブワーカー内で利用可能です。

MessagePortチャンネルメッセージング API のインターフェイスで、MessageChannel の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。

MessagePort移譲可能オブジェクトです。

EventTarget 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 関数でメッセージを段落に出力します。

js
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
# message-ports

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessagePort
close
message event
messageerror event
postMessage
options.includeUserActivation parameter
Non-standard
start
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

関連情報