HTML5クロスブラウザ対応！iframeの子ページから親ウィンドウへpostMessageを送る方法

HTML5のpostMessage APIを利用すると、クロスドメイン環境でもiframe内の子ページから親ウィンドウへ安全にメッセージを送信できます。本記事では、古いブラウザにも対応した実装方法をコード付きで解説します。

親オブジェクトによる参照

親オブジェクト（window.parent）は、子ページからメインウィンドウへの参照を提供します。これにより、子側はwindow.parent.postMessage(...)という形で、親ウィンドウに直接メッセージを送ることが可能になります。

親側の実装コード

以下が親側のコードです。このディレクティブにより、iframeは3秒ごとに親ウィンドウへメッセージを送信します。メインウィンドウからの初期メッセージは一切不要です。

var a = window.addEventListener ? "addEventListener" : "attachEvent"; // イベント登録メソッド
var b = window[a]; // イベント登録関数
var c = a == "attachEvent" ? "onmessage" : "message"; // メッセージイベント名

// 子ウィンドウからのメッセージを待ち受ける
b(c, function(e) {
    var d = e.message ? "message" : "data"; // データのキー
    var f = e[d]; // 実際のデータ
}, false);

コードのポイント解説

• 変数a：ブラウザが標準のaddEventListenerをサポートしているかを判定し、未対応の場合は旧IE向けのattachEventへフォールバックします。
• 変数b：実際にイベントリスナーを登録するための関数への参照です。
• 変数c：イベント名の差異を吸収します。旧IEでは「onmessage」、モダンブラウザでは「message」を使用します。
• 変数d・f：イベントオブジェクトからデータを取り出す際のキー名の違い（e.messageとe.data）を吸収し、実データを安全に取得します。

子側からの送信方法（参考）

子ページ側では、以下のように記述するだけで親ウィンドウへメッセージを送れます。

window.parent.postMessage("こんにちは、親ウィンドウ！", "*");

第2引数には送信先のオリジンを指定するのが安全ですが、「*」を指定するとすべてのオリジン宛てに送信されます。本番環境では、必ず具体的なオリジン（例：https://example.com）を指定するようにしましょう。

まとめ

この手法を活用すれば、旧IEを含むクロスブラウザ環境においても、iframeの子→親方向のメッセージ通信を実現できます。イベント登録メソッドやデータキー名の違いを吸収するラップ処理が、このコード最大のポイントです。