チャンネルメッセージング API
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
チャンネルメッセージング API (Channel Messaging API) を使用すると、同じ文書に添付された異なる閲覧コンテキストで実行される 2 つの別々のスクリプト（2 つの IFrame、メイン文書と IFrame、SharedWorker を介した 2 つの文書、 2 つのワーカーなど）で直接通信し、両端にポートを持つ双方向チャンネル（またはパイプ）を介して相互にメッセージをやり取りできます。
メモ: この機能はウェブワーカー内で利用可能です。
チャンネルメッセージングの概念と使用方法
メッセージチャンネルは MessageChannel() コンストラクターを使用して作成します。 作成すると、チャンネルの 2 つのポートは MessageChannel.port1 プロパティおよび MessageChannel.port2 プロパティを介してアクセスできます（どちらのプロパティも MessagePort オブジェクトを返します）。 チャンネルを作成したアプリは port1 を使用し、ポートの反対側のアプリは port2 を使用します — port2 にメッセージを送信し、window.postMessage を使用して 2 つの引数（送信するメッセージと所有権を移管するオブジェクト、この場合はポート自体）でポートを他の閲覧コンテキストに移管します。
これらの移譲可能オブジェクトが転送されると、それまで属していたコンテキストでは使えなくなります。ポートは、送信された後、元のコンテキストでは使用することができなくなります。
もう一方の閲覧コンテキストは、 onmessage を使用してメッセージを待ち受けし、イベントの data 属性を使用してメッセージの内容を取得することができます。 MessagePort.postMessage を使用して元の文書にメッセージを送り返すことで応答できます。
チャンネルへのメッセージ送信を停止したい場合は、MessagePort.close を呼び出してポートを閉じることができます。
この API の使用方法の詳細については、チャンネルメッセージングの使用を参照してください。
チャンネルメッセージングのインターフェイス
MessageChannel-
メッセージを送信するための新しいメッセージチャンネルを作成します。
MessagePort-
メッセージチャンネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのを待ち受けします。
PortCollection-
MessagePortの配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。
例
- Github でチャンネルメッセージングの基本的なデモ（ライブで実行）を公開しました。 これはページと埋め込まれた
<iframe>の間の本当に簡単な単一メッセージ転送を示します。 - また、メインページと IFrame の間で複数のメッセージを送信することができる、もう少し複雑な設定を示すマルチメッセージデモ（ライブで実行）を見ることもできます。
仕様書
| Specification |
|---|
| HTML # channel-messaging |