MessageChannel

Channel Messaging APIMessageChannel インターフェースは、新しいメッセージチャンネルを作成し、2 つの MessagePort プロパティを通して、その間でデータを送信できます。

注:

この機能は Web Worker 内で利用可能です。

プロパティ

MessageChannel.port1 読取専用
チャンネルの port1 を返します。
MessageChannel.port2 読取専用
チャンネルの port2 を返します。

コンストラクタ

MessageChannel()

2 つの新しい MessagePort オブジェクトを持つ 新しい MessageChannel オブジェクトを返します。

次のコードブロックでは、MessageChannel.MessageChannel コンストラクタを使用して作成された新しいチャンネルを知ることができます。<iframe> が読み込まれると、MessagePort.postMessage にメッセージを添えて MessageChannel.port2<iframe> へ渡します。すると、handleMessage ハンドラが <iframe> から返送されたメッセージに (MessagePort.onmessage を使用して) 返答し、これを段落に挿入します。

var channel = new MessageChannel();
var para = document.querySelector('p');

var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

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

完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。

仕様

仕様書 策定状況 備考
HTML Living Standard
MessageChannel の定義
現行の標準 Unknown との差異なし。

ブラウザの実装状況

BCD tables only load in the browser

関連情報