Home » ホームページ作成 » javascript » iframeの高さを自動調節　jquery-iframe-auto-heightの紹介

iframeの高さを自動調節　jquery-iframe-auto-heightの紹介

Posted By: slotblog 2015年1月3日

　iframeの高さを自動調節する「jquery-iframe-auto-height」の紹介です。今までは、iframe内の内容がオバーフローしたときは、スクロールバーを出して対応していましたが、「jquery-iframe-auto-height」は高さを自動調節しくれます。親ページからiframeの内容を変更した時も自動的に高さを調整します。少し残念なことにiframe内のページを読み込むとき、「http://〜」から記述をするとエラーになります。

設置方法

header内でjQueryとjquery.iframe-auto-height.plugin.jsファイルを読み込みます。
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.iframe-auto-height.plugin.js”></script>

iframeには「scrolling=”no”」を記述します。記述が無い場合はスクロールバーが表示されます。
<iframe src=”test.html” frameborder=0 scrolling=”no”></iframe>

jquery-iframe-auto-heightの実行文は、iframeより下側に記述してください。body閉じタグの上側がベストです。
<script>
$(“iframe”).iframeAutoHeight();
</script>

・「jquery-iframe-auto-height」のダウンロード
https://github.com/house9/jquery-iframe-auto-height

・設定方法
　「jquery-iframe-auto-height」の設定方法は、2種類あります。一つはiframeAutoHeightの引数として渡す方法と、「jquery-iframe-auto-height」ファイルを直接編集する方法です、

「jquery-iframe-auto-height」の設定

iframeAutoHeightの引数として渡す方
<script>
$(“iframe”).iframeAutoHeight({heightOffset:25,minHeight:1200});
</script>

「jquery-iframe-auto-height」ファイルを直接編集する方法
28行め辺りの設定値を変更します。
// set default option values
var options = $.extend({
heightOffset: 0,
minHeight: 0,
maxHeight: 0,
callback: function (newHeight) {},
animate: false,
debug: false,
diagnostics: false, // used for development only
resetToMinHeight: false,
triggerFunctions: [],
heightCalculationOverrides: []
}, spec);