IFRAMEの高さを自動調整

ページの中に他のページを埋め込む場合に　IFRAME(インライン フレーム：inline frame)　を使用することが多々あります。
しかし、このIFRAMEは高さ（height="mm"）と幅（width="nn"）を指定する必要があり、埋め込むファイルの更新が頻繁にある場合に面倒です。
あらかじめ高さを大きくとっておけば良いのですが、その場合、ページの後に長～い空行が出来て、あまり見栄えが良いものではありません。

同じような不便さを感じる人は多いらしく、IFRAME内のファイルの高さを自 動的に計算し、調整 してくれるスクリプトが開発されています。
（幅が変わることは頻繁には無いので、現在は、それほど必要性を感じていません）
×
目次

実装方法


下記.は、そのスクリプトを使用した場合のHTML例
<head>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<SCRIPT type="text/javascript" src="jquery.iframe-auto-height.js"></SCRIPT>
</head>
<body>
<p>
<IFRAME src="sample/iframetest.htm" class="sample" frameborder="0" scrolling="yes" height="100" width="500"></IFRAME>
<SCRIPT>jQuery('iframe.sample').iframeAutoHeight();</SCRIPT>
</p>
</body>


height="100"としていますが、このスクリプトにより自動的に高さが調整されます。
下記は、その例。
.

AutoHeight を使わない場合
　<iframe src="sample/iframetest.html" frameborder="0" scrolling="yes" height="100" width="500"></iframe>


AutoHeight を使って自動調整した場合　　　サンプルファイルのダウンロード(sample_auto-height.zip)
　<iframe src="sample/iframetest.html" class="sample" frameborder="0" scrolling="yes" height="100" width="500"></iframe>
　<script>jQuery('iframe.sample').iframeAutoHeight({ heightOffset: 20 });</script>


高さが自動調整されて大きくなり、スクロールバーが消えた

上記のように、クラス属性で対象が絞られています。
クラスを指定せずに、下記のようにすると、すべての IFRAME が対象

　<IFRAME src="sample/iframetest.htm" frameborder="0" scrolling="yes" height="100"width="500"></IFRAME>
　<SCRIPT>jQuery('iframe').iframeAutoHeight();</SCRIPT></p>




ダウンロード

スクリプトのダウンロードは、下図を参照。
下図は上で記述したIFRAMEを使用しています。

ダウンロード

スクリプトは、下記からダウンロード可。

jquery-iframe-auto-height　　赤枠「ダウンロード」

iframe-auto-height

解凍すると、下図のようなフォルダ構成でファイル一式が現れます。
ここでは、下図の２つのファイルを、スクリプトを置くフォルダにコピーします。
別のフォルダでも、同じフォルダでも、SRCで指定するパスと一致すれば構いません。

IFRAME-AUTO-HEIGHTのスクリプトを一式ダウンロードします。

IFRAMEの高さ調整

　－　FRAME高さを意図的に大きくする

ここでは　scrolling="no" としていますが、これを　scrolling="auto"（または省略）とすると、垂直スクロールバーが現れます。
ブラウザによっては、微妙にフレーム内に納まらない場合があります。
そのような場合にも、微調整の手段が用意されています。

<SCRIPT>jQuery('iframe').iframeAutoHeight({ heightOffset: 50 });</SCRIPT>

上のピンク字のように記述を追加すると、フレームの高さを５０ピクセルだけ伸ばします。
画面が切れる、または、不要なスクロールバーが表示される場合に指定してください。

複数のIFRAMEを個別調整


複数のIFRAMEがあり、それぞれを個別に調整したい場合は、下記のようにクラス属性を指定します。

<p><IFRAME src="download.htm" class="myclass" frameborder="0" scrolling="no" width="700"></IFRAME>
<SCRIPT>jQuery('iframe.myclass').iframeAutoHeight();</SCRIPT></p>

実装サンプル

＋クラス指定＋フレーム枠表示

<iframe src="sample/iframetest.html" class="myclassA" frameborder="1" scrolling="no" width="400" height="100"></iframe>
<script>jQuery('iframe.myclassA').iframeAutoHeight();</script>

＋スクロールバー表示 - スクロールバーが表示される

<iframe src="sample/iframetest.html" class="myclassB" frameborder="1" scrolling="yes" width="400" height="100"></iframe>
<script>jQuery('iframe.myclassB').iframeAutoHeight();</script>

＋高さ２０ - スクロールバーが消える

<iframe src="sample/iframetest.html" class="myclassC" frameborder="1" scrolling="yes" width="400" height="100"></iframe>
<script>jQuery('iframe.myclassC').iframeAutoHeight({ heightOffset: 20 });</script>

＋高さ２０＋枠非表示

<iframe src="sample/iframetest.html" class="myclassD" frameborder="0" scrolling="yes" width="400" height="100"></iframe>
<script>jQuery('iframe.myclassD').iframeAutoHeight({ heightOffset: 20 });</script>

制限事項

クロスドメインには対応していないようです。
できないことはないようですが、面倒で、あまり実用的では無いようです。下記リンク


あくまでも、相対パスで参照できる範囲内（同一ドメイン）のファイルを対象とするのが無難なようです。

補足

PCの計算能力が低い（または通信速度が遅い）場合、IFrameの展開に時間が掛かることがあります。
この場合、伸長されていない状態がしばらく画面に表示されるので、少々、間の抜けた状態となってしまいます。

よって、IFrameの初期状態の高さ（height）は、ある程度の大きさの（実際に伸長した状態の高さに近い）値として置くことをお奨めします。

関連ページ