iframeで表示するページの高さを取得する

最近、他サイトとのコンテンツ連携が多く、手軽にiframeでやりたいことが多々ありますが、中身に表示するページ内のリンクをたどった場合、各ページの高さが異なるせいで、スクロールバーが出たり出なかったりと・・・・・これを解消する方法をご案内。

簡単に説明すると、子ページで自身の高さを取得し、これを親ページに渡し、親ページのiframeの高さにセットという感じ。

○子側

<script type="text/javascript">

    window.self.onload = function() {
        var h = document.body.clientHeight + 100;//余裕を持たせるために100を足す
        window.parent.postMessage(h, 'http://oya.cyberbrain.co.jp');
    }

</script>

○親側

<script type="text/javascript">

    window.addEventListener('message', setHeight, false);

    function setHeight(ev){

        if (ev.origin != "http://ko.cyberbrain.co.jp") {
            return;
        }
        var h = ev.data;
        var target = document.getElementById('iframe');
        target.height = h;
    }

</script>

これで、中身にページのリンクをたどっても、スクロールは出ず綺麗に表示されますよ。