備忘録的プログラミングリファレンス

postMessage メソッド

Window.postMessage()

 postMessage() メソッドは、親子の Window 間でメッセージ通信を可能するメソッドです。 onmessage イベントハンドラーの併用が必要になります。
 このメソッドは Window オブジェクトのメソッドです。

 使い方としては、まずメッセージを送る側に Window.postMessage() メソッドでメッセージと識別子を送信するように設定します。 そして受け取り側で、 onmessage イベントハンドラーを通してメッセージを受け取るようにします。
 送信側で Window.postMessage() メソッドが実行されると、受信側では onmessage イベントを通してメッセージを受け取ることができます。

ページ内 Index

使い方について

 以下のようにメッセージの送信側と受信側で .postMessage() メソッドと onmessage イベントハンドラーを定義します。

openで開いた子 window オブジェクトにメッセージを送る
// メッセージの送信側の設定
	var new_window = window.open('example.html');

	// 第2引数は origin です。もしもドメインのないローカルといった場合は '*' を指定します。
	new_window.contentWindow.postMessage('Hello','https://example.com' );
	

 受け取り側では、onmessage イベントハンドラーを通してメッセージを受け取ります。

子 window オブジェクトでメッセージを受け取る
	window.addEventListener('message', function (event) {
		//送信元のドメインをチェックすることが推奨されています
		if (event.origin == "https://example.com"){
			console.log( 'message is : '+ event.data );
		}
		// メッセージを発信した window オブジェクトは event.source で取得します
		// メッセージは event.data で取得します。
		// メッセージと共に送られる origin は event.origin で取得します。
	});
	
詳しくはExampleを参照してください

 メッセージの受け取り側では、以下のようプロパティでデータを受け取ります。

受け取りプロパティ摘要
event.sourceメッセージを発信した window オブジェクト
event.dataメッセージの取得。オブジェクトデータも送信可
event.origin.postMessage()メッセージの第2引数である origin

Syntax

in JavaScript

 postMessage() メソッドはメッセージの送信するためのメソッドです。メッセージの受け取りには、 onmessage イベントハンドラーを使います。

targetWindow.postMessage( message, targetOrigin, [transfer] );

引数(Parameter Values)

Value摘要
message送信メッセージ。オブジェクトも可能
targetOriginメッセージの送信元を示す URL または otherwindow を示す'*'
transfer転送可能なオブジェクト。省略可

返り値(Return Values)

 返り値はないです。

Example

 予めこのページの window でメッセージを以下のように送信しています。

var iframe_ = document.querySelector('iframe#padding_exmpl');

iframe_.contentWindow.postMessage('Hello','*' );

 受け取り側の onmessage イベントハンドラーは送信側が送った時に反応します。そのためにこのページを表示と同時に以下にメッセージが表示されています。