jQueryでiframeの縦幅を自動調整

2013/07/30

iframeの縦幅を自動で調整する方法

概要

iframeの横縦の幅は、通常呼び出し元のページでサイズを指定します。
読み込みページの縦幅が可変する場合など、縦幅が呼び出し元ページで指定した縦幅を超えるとスクロール表示されてしまします。

スクロール表示されずに、すべて表示したい時もありますよね。
そんな時は、JavaScriptを使用します。

方法は簡単です。
iframeページが読み込まれたあとに、呼び出し元のiframeのサイズをJavaScriptで変更するのです。
そのため、読み込みページにJavaScriptで処理を記述することになります。

サンプルコード

呼び出しが完了したときに、親画面の埋め込み枠のサイズを変更します。
※例では、iframeのIDはdisp_frameに設定しています。


function iframeResize(){
	try { // !IE
		document.styleSheets[0].insertRule( 'html' + '{overflow:hidden;}', document.styleSheets[0].cssRules.length );
	} catch (e) { // IE
		document.styleSheets[0].addRule( 'html', '{overflow:hidden;}');
	}

	var height = document.body.scrollHeight + 0;
	window.parent.document.getElementById('disp_frame').style.height = height + 'px';
}
window.onload = iframeResize;