Widely available すべての主要ブラウザで対応済み。安心して使用可能。

postMessage

postMessage() は DedicatedWorkerGlobalScope インターフェイスのメソッドで、それを生成したメインスレッドにメッセージを送信します。

これは data 引数を受け入れ、そこにワーカーからメインスレッドにコピーされるデータが入ります。 data は任意の値、または構造化複製アルゴリズムで処理される JavaScript オブジェクトであり、循環参照を含むことができます。

このメソッドは、メインスレッドに移譲するための移譲可能オブジェクトの配列もオプションで受け入れます。 data 引数とは異なり、移譲されたオブジェクトはワーカスレッドでは使えなくなります（可能であれば、オブジェクトは高性能なゼロコピー処理で移譲されます）。

ワーカーを生成したメインスコープは、Worker.postMessage メソッドを使用して、ワーカーを生成したスレッドに情報を送り返すことができます。

メッセージング・ワーカー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
postMessage
4
12
3.5
4
18
5
message_event

message イベントは、ワーカーが親からメッセージを受け取ったとき（つまり、親が Worker.postMessage() を使用してメッセージを送信したとき） DedicatedWorkerGlobalScope オブジェクトで発生します。
4
12
3.5
4
18
5
MessageEvent

MessageEvent インターフェイスは対象のオブジェクトから受け取ったメッセージを表します。
2
12
3
4
18
3.2
data

data は MessageEvent インターフェイスのプロパティで、このメッセージの送信元が送信するデータを表します。
2
12
3
4
18
3.2
lastEventId

lastEventId は MessageEvent インターフェイスの読み取り専用プロパティで、このイベントの固有の ID を表す文字列です。
2
17
3
4
18
3.2
MessageEvent

MessageEvent() コンストラクターは新しい MessageEvent オブジェクトのインスタンスを作成します。
16
14
26
6
18
6
origin

origin は MessageEvent インターフェイスの読み取り専用プロパティで、メッセージ送信元のオリジンを表す文字列です。
2
12
3
4
18
3.2
source

source は MessageEvent インターフェイスの読み取り専用プロパティで、メッセージ送信者を表す MessageEventSource （WindowProxy, MessagePort, ServiceWorker オブジェクトのいずれか）です。
2
12
3
4
18
3.2
message_event

message は Window オブジェクトのイベントで、ウィンドウが例えば他の閲覧コンテキストからの の呼び出しによってメッセージを受け取った時に発生します。
60
12
9
4
60
4
postMessage

window.postMessage() は、 Window オブジェクト間で安全にオリジン間通信を可能にするためのメソッドです。例えば、ポップアップとそれを表示したページの間や、iframe とそれが埋め込まれたページの間での通信に使うことができます。
2
12
3
4
18
3.2
message_event

message イベントは Worker オブジェクトで、ワーカーの親がワーカーからメッセージを受け取ったとき（すなわち、ワーカーが DedicatedWorkerGlobalScope.postMessage() を用いてメッセージを送信したとき）に発生します。
4
12
3.5
4
18
5
postMessage

postMessage() は Worker インターフェイスのメソッドで、ワーカーにメッセージを送信します。最初の引数は、ワーカーに送信するデータです。データは、構造化複製アルゴリズムで処理できる任意の JavaScript オブジェクトです。
2
12
3.5
4
18
5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • Firefox 8 以降では、ウィンドウ間で `File` および `FileList` オブジェクトを送信する機能がサポートされています。セキュリティ上の理由から、これは送信者のプリンシパル内に受信者のプリンシパルが含まれている場合にのみ許可されます。
  • Firefox 6 以前では、`message` パラメータは文字列でなければなりませんでした。Firefox 6 以降、`message` パラメータは構造化クローンアルゴリズムを使用してシリアライズされます。つまり、ユーザー自身がシリアライズを行う必要なく、多種多様なデータオブジェクトを宛先ウィンドウに安全に渡すことができます。

基本構文

JAVASCRIPT 
onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

実務での使いどころ

  • postMessage の活用

    postMessage() は DedicatedWorkerGlobalScope インターフェイスのメソッドで、それを生成したメインスレッドにメッセージを送信します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク