iframe内のページの高さに自動変更してくれるjQueryプラグイン

Posted by アイ・エス・シーシステム事業部 on 2011年7月20日 in HTML, JavaScript/Ajax, jQuery, WEB, 技術 |

iframeタグにて他のページのコンテンツを取り込む際に
内容に応じてiframeの高さを自動調節してスクロールバーを出したくない時、ありますよね。
そんなときに重宝しそうなjQueryプラグイン「Auto iFrame Height」を見つけました。

こんなソースでiFrameに埋め込んだ中のコンテンツの高さを取得し自動で高さ調節してくれます。

<!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>

サンプルはこちら
↑このページで簡単なサンプルをダウンロードできます。

上記はJavaScriptで20段までのテーブルをランダムで作成しています。
リロードごとに高さが変わっているのがわかるはず・・・

iframeの中身は同一ドメインのコンテンツに限ります。
でないとアクセス権がない・・・とかなんとか

中身がYahoo!だと高さ調節してくれないサンプル

関連記事:

Copyright © 2011-2016 アイ・エス・シー実験室 All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.3, from BuyNowShop.com.

Get Adobe Flash player