さて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さん、ありがとうございました。