message ( onmessage )イベント
message ( onmessage )イベントは、メッセージの受信したときに発生する EventSource イベントです。
このメッセージの受信とは、親子の Window 間や iframe と 親 Window 間でのメッセージ通信のことです。
iframe.contentWindow.postMessage('Hello','*' );
/* contentWindow 側 */
window.addEventListener('message', function (event) {
console.log( event.data ); /* 親 window からのメッセージ */
});
詳しくは Example を参照してください
メッセージの送信は Window.postMessage() メソッドで行います。そのメッセージを受け取り側で onmessage イベントハンドラーを設定することで受け取ります。
ページ内 Index
使い方について
以下のようにメッセージの送信側と受信側で .postMessage() メソッドと onmessage イベントハンドラーを定義します。
// メッセージの送信側の設定
var new_window = window.open('example.html');
// 第2引数は origin です。もしもドメインのないローカルといった場合は '*' を指定します。
new_window.contentWindow.postMessage('Hello','https://example.com' );
受け取り側では、onmessage イベントハンドラーを通してメッセージを受け取ります。
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）
| Bubbles | No |
| Cancelable | No |
| Interface | EventSource |
Example
予めこのページの window でメッセージを以下のように送信しています。
var iframe_ = document.querySelector('iframe#padding_exmpl');
iframe_.contentWindow.postMessage('Hello','*' );
受け取り側の onmessage イベントハンドラーは送信側が送った時に反応します。そのためにこのページを表示と同時に以下にメッセージが表示されています。