iframe内のコンテンツの高さによってiframeの高さを自動調整する方法

2012/05/13

iframe内で別のHTMLを表示した際にそのコンテンツの高さに合わせて呼び元のブロックの高さを変更してスクロールバーを表示させたくない場合、その名もずばり「Auto iFrame Height」という「jQuery」のプラグインを使うと実現できます。

以下、使用方法を示します。

jQuery、及びAuto iFrame Heightプラグインを読み込む

<html>
<head>
:
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.autoheight.js"></script>
:
</head>
:

iframeにautoHeightクラスを指定し、スクロール指定はnoとする

<iframe class="autoHeight" scrolling="no" src="xxxx.html"></iframe>

たったこれだけです。

同一HTML内にiframeが複数あっても問題ありません。