javascriptでiframeの高さを取得する

iframeで呼び出すページの高さを取得し、親ページ側でiframeのheightを最適化します。

実現にはいろいろな方法がありますが、この方法はiframeと親ページの両方にスクリプトを設置するやり方になります。クロスドメインで使えます。

まずiframe側に設置するスクリプト。
#containerの高さを取得して親ページに数値を渡します。

<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
    if (typeof target != "undefined" && document.body.scrollHeight)
        target.postMessage(document.getElementById("container").scrollHeight, "*");
}
</script>


続いて親ページ側のスクリプト。
iframeから数値を受け取って高さを指定します。

<script type="text/javascript">
try { window.addEventListener("message", receiveSize, false); } 
catch(e) { window.attachEvent("onmessage", receiveSize); }

var rcnt = 0, new_height = 0;
function receiveSize(e) {
    new_height = Number(e.data)+30;
    document.getElementById("target_iframe").style.height = new_height + "px";
}
</script>

以上です。

参考にさせてもらったページはあったんですが、失念してしまいました。