kawama.jp

javascriptでiframeの高さを取得する

カテゴリ: Ajax,JavaScript,CSS — タグ: , — 2013年2月23日 11:45 — Comments (0)hatebu count

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>

以上です。

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

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress

css.php