iframe（インラインフレーム）は、外部のURL（HTMLファイル、PHP）や他のドキュメントを、画面中にインラインで表示することができる便利なタグです。
しかし、読み込ませる内容によっては、iframeの中でページ移動をした際に、スクロールバーが出てしまったり、最初に設定したiframeの高さに満たないコンテンツが表示された場合、画面の下の方に空白ができてしまい、機能性はともかく見た目の美しさが損なわれます。
そこで登場するのが今回ご紹介するjQueryのプラグイン、「jquery-iframe-auto-height」です。iframeに読み込まれるコンテンツの高さを自動取得して、iframeの高さを変更してくれるというものです。
このプラグインの優れているところは、iframeのタグを既述するHTMLにだけ、このプラグインを読み込ませればOKという手軽さです。読み込ませる先の階層のHTMLにも既述が必要になるタイプだと、それだけ作業の量も増えてしまいますし、中身を触ることができない、外部サイトのURLを読み込ませる際等、施工が出来ない可能性もあります。
iframeの高さを自動調整してくれるJavascriptは他にもありますが、色々利用してみた感じでは、このjquery-iframe-auto-heightが一番使い易いと感じました。
使い方は色々なブログで紹介されているのですが、実装になぜかひっかかってしまった点がありましたので、その経緯と実装までを記録に残しておきたいと思います。
最新バージョンだとなぜか動作しない？
このプラグインは、jQueryのプラグインなので、jQuery本体が無ければ単体では動作しません。で、jQueryの最新のバージョンは現在1.9.1で、jquery-iframe-auto-heightもそれに併せてバージョンアップがされています。
しかし、私の環境では何故か、最新のjQuery（v1.9.1）とjquery-iframe-auto-height（v1.9.1）を利用して実装しても、高さ調整が効きませんでした。他のバージョンで併せてみてもなぜか動きません。そこで、公開されているデモ版を全てダウンロードし、その中に格納されている「jquery.iframe-auto-height.plugin.js」と、「jquery-1.6.2.js」を利用する事で、ちゃんと動作を確認することができました。
私の実装に仕方がまずかったのかもしれませんが、同様の現象に遭遇している人がいればと思い、記事に残しておきたいと思います。
デモファイルのダウンロードから実装まで
jquery-iframe-auto-heightにアクセスして、画面のヘッダー下付近にある「ZIP」をクリック。デモファイルをダウンロードします。ダウンロードしたら、zipを解凍して以下の二つのファイルを持ってきます。
/demo_on_rails/app/assets/javascripts/lib/jquery-1.6.2.js /demo_on_rails/app/assets/javascripts/src/jquery.iframe-auto-height.plugin.js
iframeを読み込ませるHTMLファイルの階層に上記の2ファイルを置きます。別途jsフォルダを作っていたり、jsファイルを纏めているフォルダがあるなら、そこへ配置してください。
iframeのタグを既述するHTMLの<head></head>間に以下を既述。
<script src="js/jquery-1.6.2.js"></script> <script src="js/jquery.iframe-auto-height.plugin.js"></script>
上記のパスはサンプルです。配置する環境にパスは合わせてください。そして、iframeのタグと合わせて、以下の既述を表示させたい箇所に既述します。
<iframe src="xxxx.html" scrolling="no"></iframe>
<script type="text/javascript">
jQuery('iframe').iframeAutoHeight({debug: true, diagnostics: false});
</script>
xxxx.htmlに読み込ませたいファイルやURLを既述します。これらのHTMLファイルやjsファイルを全てサーバーにアップロードし、実際の動きを確認します。
私はこの方法でちゃんと動作する事を確認しました。最新版で動かなかったのは、ただ単に私のやりかたがおかしかっただけかもしれません。もう少し検証してみて、何か進展があれば追記していきます。
3/10 追記
コメントの方で、最新のバージョン（ver1.9.0以降）の利用において
Jquery1.9以降のJqueryと組み合わせて使用する場合、サイトからダウンロードしたファイルに含まれる「jquery.browser.js」を併せて使う必要があると、iframeAutoHeightサイトの「Note」に記載されています。
とのコメントを頂きました。公式サイトの方でも、Noteの項目に以下の様に書かれています。
- jQuery 1.9.0 and up: you must add the $.browser plugin feature – https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js
- download and include after the jquery plugin and before the iframe plugin
私が利用した際、jquery.browser.jsをダウンロードしておらず、それが原因で正しく動作しなかったようです。jquery-iframe-auto-heightの最新バージョンを利用する際は、ご注意下さい。
情報を提供いただいたChiaraさま、有難うございました！
コメント
はじめまして。
iframeAutoHeightを検索して、こちらのサイトにたどり着きました。
iframeAutoHeightは、Jquery1.9以降のJqueryと組み合わせて使用する場合、サイトからダウンロードしたファイルに含まれる「jquery.browser.js」を併せて使う必要があると、iframeAutoHeightサイトの「Note」に記載されています。
3つのスクリプトを併せて使用すると、正常に動作しますので、お試し下さい。
お邪魔しました(^_^)
>Chiaraさま
有益な情報を頂きまして、ありがとうございます！
成程、ver1.9以降の利用ではjquery.browser.jsも併せて利用する必要があったのですね。
道理で何度試しても動作しなかったわけですね・・・。合点がいきました。
Noteに書かれている情報も見逃していました。
※当記事内で、頂いた情報を元に追記を行っておきました。
有難うございました！