postMessage メソッド

window.postMessage()

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

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

使い方について

　以下のようにメッセージの送信側と受信側で .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 イベントハンドラーは送信側が送った時に反応します。そのためにこのページを表示と同時に以下にメッセージが表示されています。