MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

MessageChannel.port2

MessageChannel インターフェースの port2 読み取り専用プロパティは、メッセージチャンネルの第 2 ポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。

註: この機能は Web Workers 内で利用可能です。

構文

channel.port2;

チャンネルの第 2 ポートを表す MessagePort オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。

次のコードブロックでは、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 を参照してください (実際のデモも実行できます)。

仕様

仕様書 策定状況 備考
WHATWG HTML Living Standard
port2 の定義
現行の標準 HTML5 Web Messaging との差異なし。
HTML5 Web Messaging
port2 の定義
勧告 仕様の W3C バージョン。

ブラウザの実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 4 41 (41) 10.0 10.6 5
worker 内の利用 (有) 41 (41) (有) (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 4.4 4 41.0 (41) (有) 10.0 11.5 5.1
worker 内の利用 (有) (有) 41.0 (41) (有) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Marsf
 最終更新者: Marsf,