子ページから親ページ（別ドメイン）の iFrame の大きさを操作する

JavaScript

2014.07.10

近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。

さて、今回は tips です。
別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。
最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に空間ができたり逆にスクロールバーが出たり…
みたいな事を回避するための tips をご紹介します。
postMessage を利用するので、古めのブラウザでは動かない可能性があるのでご注意をば。

postMessage による値の受け渡し

他のページへのメッセージの受け渡しは window.postMessage() を使います。書き方は以下。

window.postMessage("value", "target");

第一引数の「value」には渡したい値、「target」には送信先の URL を指定します。例えばこんな感じ。

window.postMessage("hello! ", "http://c-brains.jp/");

これで「hello!」というメッセージを http://c-brains.jp/ に送れます。

addEventListener で受け取り

渡された側は message イベントを監視し、postMessage() で送られた物を受け取ります。

window.addEventListener("message",  changeFrameSize, false);

例えばこのようにすれば、メッセージを受け取った時に「changeFrameSize」という関数が発動するようになります。

子ページ側から親ページの iFrame の大きさを操作

さて、では実際にサンプルを見ていきましょう。

まずは子ページ、すなわち iFrame 内に表示されるページのサンプルコードはこちら。こちらのドメインは「c-brains.co.jp」の想定とします。

<script type='text/javascript'>
    window.self.onload = function() {
        // 読み込み時に自身の高さを取得
        var h = document.body.clientHeight;
        // その高さに 100 ほど足してデータを送信する
        window.parent.postMessage(h + 100, 'http://c-brains.jp');
    }
</script>

親ページ、すなわち iFrame の置いてる方のサンプルコードはこちら。こちらのドメインは「c-brains.jp」の想定とします。

<script type='text/javascript'>
    function changeFrameSize(event){
        // 送られてきたのが確実に「c-brains.co.jp」からである事を確認
        if (event.origin != "http://c-brains.co.jp") {
            return;
        }
        var child_height = event.data;
        var target = document.getElementById('iframe');
        // 受け取った数値を高さに設定
        target.height = child_height;
    }

    // message が来たら changeFrameSize を発動
    window.addEventListener('message', changeFrameSize, false);
</script>

これで、iFrame 内でページが遷移して大きさが変わっても、自動で iFrame の大きさが変わり、適度な大きさに収まるようになります。

ポイントとしては、受け取り側は「origin」で送信元を確認し間違いなく既知のサイトからの通信であることを確認しています。
送信側も、URL を指定し、目的外のサイトに不用意にデータを渡さないようにしています。
クロスドメインでデータを扱う際は、悪意ある相手からの攻撃を受けないためにも、チェックを厳重にしましょう。