Eiji

2012年2月20日

iframeで読み込むページの高さを取得して、heigthに代入する方法


iframe タグで表示する HTML の内容によって高さを自動で変更(調節)する JavaScript の方法を何個か見つけたので、その方法をメモ。

1. 子フレームに、JavaScript を読み込んで、高さを変更(調節)する方法。


高さ変更(調節).js内の「 getElementById('disp') 」と親フレームの「 id="disp" 」は同じにする。
子フレームから高さ変更(調節).jsを呼び出させる。

高さ変更(調節).js の『 var PageHight = document.body.scrollHeight + 0; 』の『 0 』を増加させてスクロールが出ないように微調整してください。

HTML - 親フレーム.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<iframe name="disp" id="disp" src="子フレーム.html" width="100%" frameborder="0" scrolling="auto"></iframe>
</body>
</html>

HTML - 子フレーム.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="高さ変更(調節).js"></script>
</head>

<body>
<script>
for (var i=1; i<21; i++){document.write("Sample text " +i+ "<br>");};
</script>
</body>
</html>

JavaScript - 高さ変更(調節).js

function iframeResize(){
	var PageHight = document.body.scrollHeight + 0; // ページの高さを取得
	window.parent.document.getElementById('disp').style.height = PageHight + 'px'; // iframeの高さを変更
}
window.onload = iframeResize;

DEMO

IE8、Fierfox10、Chrome16、Opera11で動作確認済み。
「通常」「変更(調整)済み」ともに「高さ(height)」指定はしていません。

通常 変更(調整)済み

2. 親フレーム側から、JavaScript で子フレームの高さを変更(調節)する方法。


JavaScript側の「 hoge 」と iframe 内の「 name="hoge" 」は同じにする。
JavaScript内の「 var parents 」と変更する iframe 内の「 id 」を同じにする。
子フレーム.html内の「 <div> ~ </div> 」で囲んだ部分の高さを親フレーム・JavaScript側の「 getElementsByTagName("div") 」で取得するので、サンプルのように「 div 」を使ったなら「 div 」で統一させる。

親フレーム・JavaScript内の『 offsetHeight + 0; 』の『 0 』を増加させてスクロールが出ないように微調整してください。

HTML + JavaScript - (親フレーム.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript"> 
onload = function() { 
	var parents = 'hoga';
	selectObj = document.getElementsByTagName('iframe');
	matchObj = new RegExp(parents);
	for(i=0; i < selectObj.length; i++){
		if(selectObj[i].id.match(matchObj)){
			document.getElementsByTagName("iframe")[i].height = hoge.document.getElementsByTagName("div")[0].offsetHeight + 0;
			break;
		}
	}
} 
</script> 
</head>

<body> 
<iframe src="子フレーム.html" id="hoga" name="hoge" style="border:0; width:100%; overflow:auto;"></iframe>
</body>
</html>

HTML - (子フレーム.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<div>
<script>
for (var i=1; i<21; i++){document.write("Sample text " +i+ "<br>");};
</script>
</div>
</body>
</html>

DEMO

IE8、Fierfox10、Chrome16、Opera11で動作確認済み。
「通常」「変更(調整)済み」ともに「高さ(height)」指定はしていません。

通常 変更(調整)済み

3. jQueryプラグインを使って、親フレームから子フレームの高さを変更(調節)する方法。


jQuery本体は本家か、Google等から持ってきて、iframeの高さを変更するプラグインを以下のサイトからダウンロードする。

jQuery iframe auto height plugin(github)
https://github.com/house9/jquery-iframe-auto-height

iframe要素を記述し、その直後にjQuery iframe auto height pluginを動作させるコードを記述します。

必要であれば、heightOffsetオプションに数値を増加させてスクロールが出ないように微調整してください。
(例) $('iframe').iframeAutoHeight({ heightOffset: 50 });

HTML + jQuery - (親フレーム.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="./iframe-auto-height.js"></script> 
</head>

<body> 
<iframe src="子フレーム.html" id="sample3" style="border:0; width:100%; overflow:auto;"></iframe> 
<script>
$('#sample3').iframeAutoHeight();
</script>
</body>
</html>

HTML - (子フレーム.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>
for (var i=1; i<21; i++){document.write("Sample text " +i+ "<br>");};
</script>
</body>
</html>

DEMO

IE8、Fierfox10、Chrome16、Opera11で動作確認済み。
「通常」「変更(調整)済み」ともに「高さ(height)」指定はしていません。

通常 変更(調整)済み

4. jQueryを使って、子フレーム側から親フレームの高さを変更(調節)する方法。


jQuery本体は本家か、Google等から持ってきて、以下のスクリプトを子フレーム側に記述する。

$(document).height() で子フレーム側のコンテンツ表示の高さを取得して親のiframeタグの高さを変更させてるけど、IEだけは例外的に数ピクセル分の余白が発生してスクロールが表示される。
overflow: hidden; も使ってみたけど、子フレームのコンテンツの一番下がフレーム枠に被さるようになるので見た目的にイマイチ。
もっとイイやり方ありそうだけど、対策として$(document).height() に +10 を付け足して調整してます。

HTML - (親フレーム.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body> 
<iframe src="子フレーム.html" id="sample4" style="border:0; width:100%; overflow:auto;"></iframe> 
</body>
</html>

HTML + jQuery - (子フレーム.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
	var pageHight = $(document).height() + 10; // +10 はIEの無駄にでるスクロール非表示対策
	$('#sample4',parent.document).css({height:(pageHight)});
});
</script>
</head>

<body>
<script>
for (var i=1; i<21; i++){document.write("Sample 4 text " +i+ "<br>");};
</script>
</body>
</html>

DEMO

IE8、Fierfox10、Chrome16、Opera11で動作確認済み。
jQuery 1.9.1で動作確認済み。
「通常」「変更(調整)済み」ともに「高さ(height)」指定はしていません。

通常 変更(調整)済み

5. iframeタグの下に出来る隙間・空白を消す方法


何故か? iframeタグを使うと下辺だけ微妙に隙間・空白が出来てしまいます。
それは、「要素の基準線としてbaselineが指定されているから」だそうです。

なので、vertical-align: bottom; を iframeタグ に指定することで、隙間は消えます。


関連記事


Web制作・記事一覧