iframeの高さを自動調整する
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。
サンプル：iframeの高さを自動調整するデモ
- HTML + JavaScript
-
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <iframe src="a.html" frameborder="0" width="100%" height="150"></iframe> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script> $('iframe') .on('load', function(){ try { $(this).height(this.contentWindow.document.documentElement.scrollHeight); } catch (e) { } }) .trigger('load'); </script> </body> </html> - JavaScriptのみ抜粋
-
$('iframe') .on('load', function(){ try { $(this).height(this.contentWindow.document.documentElement.scrollHeight); } catch (e) { } }) .trigger('load');
iframeがキャッシュされてもload処理を行うためにjQueryのtriggerメソッドを使っています。一つ以上のiframeに対してケアするため、triggerHandlerではなくtriggerを使っています。
try catch を使っているのは、クロスブラウザ検証を怠っているためで、仮にcontentWindow.document.documentElement.scrollHeightがエラーを返して致命的なバグにならないように配慮しました。
サンプル：iframeの高さを自動調整するデモ
2016年5月27日追記：
ある条件において高さが自動調整されずに余白が残る場合があるようです。そんなときは是非試してみてください！（コメントいただいたe3961さん、ありがとうございます！）
- 症状
- Firefox（Mac）で、縦幅が広いb.htmlを読み込んでいる状態のiframeに縦幅が狭いa.htmlを読み込むとb.htmlの高さが残る（Webkitでは再現しない）。
- 解決方法
-
$('iframe')
.on('load', function(){
try {
$(this).height(0);
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
} catch (e) {
}
})
.trigger('load');