iframeタグにて他のページのコンテンツを取り込む際に
内容に応じてiframeの高さを自動調節してスクロールバーを出したくない時、ありますよね。
そんなときに重宝しそうなjQueryプラグイン「Auto iFrame Height」を見つけました。
こんなソースでiFrameに埋め込んだ中のコンテンツの高さを取得し自動で高さ調節してくれます。
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>autoheight</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autoheight.js"></script>
</head>
<body>
IFRAME内のページの大きさに自動で高さ調整するサンプル<br />
<iframe id="myframe" name="myframe" class="autoHeight" frameborder="1" scrolling="no" src="heightpage.html"></iframe>
</body>
</html>
[/html]
サンプルはこちら
↑このページで簡単なサンプルをダウンロードできます。
上記はJavaScriptで２０段までのテーブルをランダムで作成しています。
リロードごとに高さが変わっているのがわかるはず・・・
iframeの中身は同一ドメインのコンテンツに限ります。
でないとアクセス権がない・・・とかなんとか
