Channel Messaging APIMessagePort インターフェースは、MessageChannel の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。

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

メソッド

親である EventTarget からのメソッドを継承します。

MessagePort.postMessage
ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他のブラウジングコンテキストへ転送します。
MessagePort.start
ポート上で順番待ちのメッセージの送信を開始します。(EventTarget.addEventListener を使用する場合のみ必要。これは、MessagePort.onmessage を使用する場合を含みます)
MessagePort.close
ポートとの接続を切断し、このポートはアクティブではなくなります。

イベントハンドラ

親である EventTarget からのイベントハンドラを継承します。

MessagePort.onmessage
これは、message 型の MessageEvent がポート上で発動した時に呼び出される EventListener です。つまり、ポートがメッセージを受信した時に呼び出されます。
MessagePort.onmessageerror
ポートで messageerror 型の MessageEvent が発火すると呼び出されます。つまり、デシリアライズできないメッセージを受け取ったときです。

次のコードブロックには、MessageChannel.MessageChannel コンストラクタで作成された新しいチャンネルがあります。

Iframe が読み込まれると、MessageChannel.port1onmessage ハンドラーを登録し、メッセージと共に window.postMessage を使用して IFrame に MessageChannel.port2 を送信します。

IFrame からメッセージが返却されると。onMessage 関数でメッセージをパラグラフに出力します。

var channel = new MessageChannel();
var output = document.querySelector('.output');
var 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 を参照してください (実際のデモも実行できます)。

仕様

仕様書 策定状況 備考
HTML Living Standard
Message ports の定義
現行の標準  

ブラウザの実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android ?
Available in workersChrome 完全対応 ありEdge ? Firefox 完全対応 41IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 41Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
closeChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android ?
onmessageChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android ?
onmessageerrorChrome 完全対応 60Edge ? Firefox 完全対応 57IE ? Opera 完全対応 47Safari ? WebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile ? Firefox Android 完全対応 57Opera Android 完全対応 47Safari iOS ? Samsung Internet Android ?
postMessageChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android ?
startChrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 10Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

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

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