We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

MessagePort インターフェイスの onmessage イベントハンドラは、EventListener であり、ポート上で message 型の MessageEvent が発動した時に呼び出されます。つまり、ポートがメッセージを受信した時に呼び出されます。

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


channel.onmessage = function() { ... };

次のコードブロックには、MessageChannel.MessageChannel コンストラクタで作成された新しいチャンネルがあります。IFrame が読み込まれた時、MessagePort.postMessage を使用してメッセージと MessageChannel.port2 が IFrame へ渡されます。すると、handleMessage ハンドラが onmessage によって IFrame から返されたメッセージに応答し、そのメッセージを段落に出力します。ここで、MessageChannel.port1 は、メッセージが到着したときに確認するための待機状態にあります。

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 上の チャンネルメッセージ送信の基本デモ を見てください (実際の動作も確認できます)。


仕様書 策定状況 備考
HTML Living Standard
onmessage の定義
現行の標準 Unknown との差異なし。
onmessage の定義
不明 仕様の W3C バージョン。


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 4 未サポート 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 未サポート 未サポート 10.0 11.5 5.1
Worker 内で利用可能 (有) (有) 41.0 (41) (有) (有) (有) (有)



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