iframeの高さを内容に応じて自動設定（調節）してくれるjQueryプラグイン

公開

古いプログラムで動作しているコンテンツをリニューアル後のサイトにも取り入れる必要が発生し、ひとまずiframeを利用することにしました。その際、iframeの高さをiframeの内容の高さに応じて自動で設定（調節）する方法がないか考えていたところ、jQueryプラグインを見つけました。

いくつかのサイトで同様の機能を持つスクリプトが公開されていましたが、iframeを記述する文書とiframeで読み込まれる文書の両方にJavaScriptを記述する必要があり、少々大変そうです。しかし、このjQuery iframe auto height pluginであれば、iframeを記述する文書にのみプラグインを動作させるスクリプトを記述するだけで動作するので、導入が非常に簡単です。IE6でも動作を確認しました（Windows 7のXPモードにて）。

導入方法

head要素内でjQueryとダウンロードしたjQuery iframe auto height pluginを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/shared/js/jquery.iframe-auto-height.plugin.js"></script>

iframe要素を記述し、その直後にjQuery iframe auto height pluginを動作させるコードを記述します。jQueryなので"$"を使ってもかまいませんが、他のライブラリとの共存を考えると"jQuery"と書いておいた方が後々問題が発生せず良いのではないかと考えます。

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

ちなみに、普通のプラグインのようにdocument readyの中に入れると（次のコード例）、IE（確認したのは7・8）で上手く動作しません。iframeのloadイベントがfireしないようです。

<script type="text/javascript">
$(function() {
 jQuery('iframe').iframeAutoHeight();
});
</script>

オプション設定

次の例のようにheightOffsetオプションに数値を与えると、取得した高さに加えオプションで指定した分の高さが設定されるようになります。最後の要素に下方向のmarginが指定されており、ほんの少しだけ動かせるスクロールバーが表示されてしまう場合などに使ってみて下さい。

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

備考

  • iframeで読み込む文書がQuirksモードでレンダリングされる場合、Internet Explorerで高さが上手く取得できないようです。プラグインの一部を次のように書き換えると値が取れるようです。githubで本内容をPull Requestしたところ、Version 1.2.0で下記コードが取り入れられ問題なく動作するようになりました。 
    function resizeHeight(iframe) {
 // Set inline style to equal the body height of the iframed content plus a little
 var newHeight;
 if(iframe.contentWindow.document.compatMode && 'ActiveXObject' in window && 'function' === typeof window.ActiveXObject) {
 // IE Quirks mode
 newHeight = iframe.contentWindow.document.body.scrollHeight + options.heightOffset;
 } else {
 newHeight = iframe.contentWindow.document.body.offsetHeight + options.heightOffset;
 }
 iframe.style.height = newHeight + 'px';
 options.callback({newFrameHeight:newHeight});
}