--- title: MessageChannel.port2 slug: Web/API/MessageChannel/port2 tags: - API - Channel messaging - HTML5 - MessageChannel - Property - Reference translation_of: Web/API/MessageChannel/port2 ---

{{APIRef("HTML DOM")}}

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

{{AvailableInWorkers}}

構文

channel.port2;

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

次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、handleMessage ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("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 を参照してください (実際のデモも実行できます)。

仕様

仕様書 策定状況 備考
{{SpecName('HTML WHATWG', '#dom-messagechannel-port2','port2')}} {{Spec2('HTML WHATWG')}} {{SpecName("HTML5 Web Messaging")}} との差異なし。
{{SpecName('HTML5 Web Messaging', '#dom-messagechannel-port2','port2')}} {{Spec2('HTML5 Web Messaging')}} 仕様の W3C バージョン。

ブラウザの実装状況

{{Compat("api.MessageChannel.port2")}}

関連情報