クロスドメイン環境のiframeで子フレームから親フレームに値を渡す方法

クロスドメインの環境でiframeを使用しており、子フレーム側から親フレーム側に値を渡し、親フレーム側にてJavaScriptで何らかの処理を行いたかった。調べたところJavaScriptのwindow.postMessageメソッドを使用するのがよさそう。以下に実装方法をメモ。

やりたいこと

• クロスドメイン環境のiframeで子フレーム側のbody要素のheightの値を親フレームに送信
• 親フレーム側でiframeタグのheightを動的に変更

ソースコード

親フレーム側

<iframe id="test_id_2" src="https://child.com/child.html" scrolling="no"></iframe>

<script>
//postMessageを受信した場合にreceiveSize関数を実行
window.addEventListener('message', receiveSize, false);

function receiveSize(e) {

    //オリジンが子フレーム側のドメインの場合
    if( e.origin === 'https://child.com' ){

        //iframeのheightを変更
        document.getElementById('test_id_2').style.height = `${e.data}px`;
    }
}
</script>

子フレーム側

<div id="test_id_1" style="height: 1000px; background:red;"></div>

<script>
//ページ読み込み時にpostSize関数を実行
window.addEventListener('load', postSize, false);

function postSize(e){
    let target;

    //通常の最新ブラウザの場合
    if( parent.postMessage ){
        target = parent;

    //IE8などの特殊な環境の場合
    }else if(parent.document && parent.document.postMessage) {
        target = parent.document;

    //postMessage非対応のブラウザの場合
    }else{
        target = undefined;
    }

    //postMessageに対応しておりbodyのheightが取得できている場合は送信
    if( typeof target != 'undefined' && document.body.scrollHeight ){
        target.postMessage(document.getElementById('test_id_1').scrollHeight, '*');
    }
}
</script>

クロスドメインじゃない場合

クロスドメインではなく同一ドメインで実装したいような場合はBroadcast Channel APIを使用する方がスマートに実装できそう。

リファレンス

Window: postMessage() method

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

参考サイト

http://d.hatena.ne.jp/bannyan/20090820/1250789189

http://sugilog.hatenablog.com/entry/20111130/1322653985