iframe内の高さを取得し、内容に合わせて高さを変更するJavascript

2008年12月 1日 13:16

仕事でちょっとタイトル通りのことをする必要が生じたので、それを簡単に実装するJavascriptを作ってみた。

簡単に内容を説明すると、「iframeElement.contentWindow.document.body.scrollHeight」（iframeElementはiframeオブジェクト）というプロパティでiframe内のbody要素の高さを取得します。
これ以外にもoffsetHeightとかclientHeightなんかでもほぼ同様の値を取得できるが、IE6ではこのプロパティだけしか高さを取得できなかったのでこれを使ってます。

そして、その取得した数値をiframe自身の高さに設定してやる、というだけのものです。
いちおう簡単に実装、を目的としたので作ったjsファイルとそれの使い方も解説しておきます。

▼EntryMore▼

まず以下のjsファイルを読み込ませます。

fit_ifr.js
iframe内の高さを取得し、内容に合わせて高さを変更するJavascript

デフォルトの設定では、JSファイルを読み込んだ時点で自動的にページ読み込み完了後に全iframeを内容に合わせてフィットさせます。
もし手動で実行したい場合は、ダウンロードしたJSファイル上部にある「var auto = 1」の部分を「0」に変更してください。

手動の場合は、関数「fitIfr()」を実行すればすべてのiframeが内容に合わせてリサイズされます。
またオプションとして、特定のIDを持つiframeだけを内容に合わせてリサイズしたい場合は、引数にIDを列挙してください。

たとえば、「ifr1」「ifr2」というふたつのIDのiframeだけをリサイズしたい場合は「fitIfr('ifr1','ifr2')」と列挙するだけです。

また逆に、指定したIDだけリサイズさせたくない場合は、"-"をIDの頭に付けてください。
先ほどの例のIDを「除く」場合は「fitIfr('-ifr1','-ifr2')」とすることで、このふたつのIDを持つiframe以外のiframeがリサイズされます。

//ページ読み込み完了後の動作（0=自動でフィットしない、1=自動でフィット）
var auto = 1;

//メイン関数
function fitIfr() {
	if( !arguments[0] || arguments[0].type == 'load' ) {
		var ifrObjs = document.getElementsByTagName( 'iframe' );
		for( var i=0; i<ifrObjs.length; i++) {
			var ifrObj = ifrObjs.item(i);
			try {
				var mt = getStyle( ifrObj.contentWindow.document.body, 'margin-top' );
				var mb = getStyle( ifrObj.contentWindow.document.body, 'margin-bottom' );
				ifrObj.height = ifrObj.contentWindow.document.body.scrollHeight + Number( mt.match( /[0-9]+/g ) ) + Number( mb.match( /[0-9]+/g ) );
			} catch( e ) {
				/* skip process */
			}
		}
	} else if( arguments[0].charAt(0) == '-' ) {
		var ifrObjs = document.getElementsByTagName( 'iframe' );
		var chkFlg;
		for( var i=0; i<ifrObjs.length; i++) {
			var ifrObj = ifrObjs.item(i);
			chkFlg = false;
			for( var k=0; k<arguments.length; k++ ) {
				if( ifrObj.id == arguments[k].substring( 1, arguments[k].length ) ) {
					if ( arguments[k].charAt( 0 ) == '-' ) chkFlg = true;
				}
			}
			
			if ( !chkFlg ) {
				try {
					var mt = getStyle( ifrObj.contentWindow.document.body, 'margin-top' );
					var mb = getStyle( ifrObj.contentWindow.document.body, 'margin-bottom' );
					ifrObj.height = ifrObj.contentWindow.document.body.scrollHeight + Number( mt.match( /[0-9]+/g ) ) + Number( mb.match( /[0-9]+/g ) );
				} catch( e ) {
					/* skip process */
				}
			}
		}
	} else {
		for( var i=0; i<arguments.length; i++ ) {
			var ifrObj = document.getElementById( arguments[i] ) ? document.getElementById( arguments[i] ) : false;
			if( !ifrObj ) continue;
			try {
				var mt = getStyle( ifrObj.contentWindow.document.body, 'margin-top' );
				var mb = getStyle( ifrObj.contentWindow.document.body, 'margin-bottom' );
				ifrObj.height = ifrObj.contentWindow.document.body.scrollHeight + Number( mt.match( /[0-9]+/g ) ) + Number( mb.match( /[0-9]+/g ) );
			} catch( e ) {
				/* skip process */
			}
		}
	}
}

//キャメライズ（z-indexなどをzIndexなどに）
String.prototype.camelize = function() {
	return this.replace( /-([a-z])/g,
	function( $0, $1 ) { return $1.toUpperCase() } );
}

//デキャメライズ（zIndexなどをz-indexなどに）
String.prototype.deCamelize = function() {
	return this.replace( /[A-Z]/g,
	function( $0 ) { return "-" + $0.toLowerCase() } );
}

function getStyle( ele, property, pseudo ) {
	if( ele.currentStyle ) { //IE or Opera
		if( property.indexOf( '-' ) != -1 ) property = property.camelize();
			return ele.currentStyle[ property ];
	} else if ( getComputedStyle ) { //Mozilla or Opera
		if( property.indexOf( '-' ) == -1 ) property = property.deCamelize();
		return document.defaultView.getComputedStyle( ele, pseudo ).getPropertyValue( property );
	}

return '';
}

if( auto ) {
	if( window.addEventListener ) window.addEventListener( 'load', fitIfr, false );
	else window.attachEvent( 'onload', fitIfr );
}