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

message ( onmessage )イベント

 message ( onmessage )イベントは、メッセージの受信したときに発生する EventSource イベントです。
 メッセージの受信とは、親子の Window 間や iframe における Window 間でのメッセージ通信のことです。

 メッセージの送信は 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 HTML

in JavaScript

object.onmessage = function(){ }; object.addEventListener("message", script_);

備考(Remarks)

BubblesNo
CancelableNo
InterfaceEventSource

Example

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

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

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

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