検索

///

iframeの高さを自動調整する

wrote :

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');

川上 武範（かわかみ たけのり）
1975年生。シンプルシンプルデザイン代表兼Webクリエイター。たびのとWebサイト運営責任者。

企画からサイト設計、正しいマークアップを意識したWebサイト制作やユーザー視点の情報設計を得意としている。

シンプルシンプルデザイン
たびのと
twitter : たけたけ@OnlyTwo

メディア掲載
2016年10月25日 レバテックフリーランスの記事「自作Webサービス記事紹介まとめ」でサイト内の記事「Webサービス「たびのとTOKYO」を作ってみました」を紹介していただきました。