ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

iframeの高さを内容物に合わせて自動的に制御(JQuery)

March 20 2012

さてiframeを使ったサイトで、内容物の高さが変わる場合のお話。
たとえば更新情報やお知らせなんぞをトップに埋め込んで中身をクライアントが更新、
みたいな場合ですね。

その場合はiframeの高さがもちろん変わってしまうわけですが
高さを決めてスクロールバーを出すようにするのが手っ取り早い。
しかし、このスクロールバーを嫌う方もいらっしゃいます。
内容物の高さに応じて、iframeの高さを変える方法はないものかと色々探すと
jQueryプラグインを見つけました。

jQuery iframe auto height plugin(github)
https://github.com/house9/jquery-iframe-auto-height

導入方法

まずはJQuery本体とダウンロードしたjquery.iframe-auto-height.jsを
head部分に読み込ませる。
置き場所がcommon/js/とかだとこんな感じ。


<script src="./common/js/jquery.js"></script>
<script src="/common/js/jquery.iframe-auto-height.plugin.js"></script>

あとは高さを変えたいiframeの直後に


<iframe src="hogehoge.html"></iframe>
<script type="text/javascript">
jQuery('iframe').iframeAutoHeight();
</script>

と書いてあげるだけでOKという手軽さが大変ヨロシ。
コンフリクト防止の為にあえてjQueryと書いてます。

オプションにheightOffsetというのがあって
取得した高さに設定した数値の高さを足してあげる事も可能です。


<iframe src="hogehoge.html"></iframe>
<script type="text/javascript">
jQuery('iframe').iframeAutoHeight({ heightOffset: 100 });
</script>

この場合、取得した高さプラス100ピクセルを追加しています。

※追記
コメント欄で
「他のドメインのサイトをiframeで表示させる場合は使えない」とのご指摘を頂きました。
ffさん、ありがとうございました。

| Posted in Javascript | Comments (2)

2 Comments

  1. ff
    Posted 2012年4月13日 at 11:40 AM |

    重要なのは他のサイトのページにはできないってことですよね?

  2. Gaku@管理人
    Posted 2012年4月17日 at 4:58 AM |

    >>ffさん
    ご指摘ありがとうございます。
    本文に追記させて頂きました。

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31