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

カテゴリ：Javascript小技 2008年12月 1日 13:16

更新履歴

[09/06/10]: ブラウザによっては iframe の縮小ができなかった問題を修正しました。

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

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

ver2.0 では主にiframeElement.contentWindow.document.documentElement.offsetHeightを使うように仕様変更しています。

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

このスクリプトによる高さの取得は、同一ドメインのページを表示する際だけに使用できます。別ドメインのページを iframe で表示した際は、ページの DOM に対してスクリプトがアクセスできないため、高さの取得はできません。

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

http://css-eblog.com/eblog_sample/0812/fit_ifr/

▼EntryMore▼

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

ダウンロード

デフォルトの設定では、JS ファイルを読み込んだ時点で自動的にページ読み込み完了後に全 iframe を内容に合わせてフィットさせます。

ver1.1 の設定

もし手動で実行したい場合は、ダウンロードした JS ファイル上部にあるvar auto = 1の部分を0に変更してください。

ver2.0 の設定

ver2.0 からは URL パラメータによる設定が可能になりました。
手動で設定をしたい場合は以下のように読み込んでください。

手動での設定方法

手動の場合は、関数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 );
}

パーマリンク
コメント(17)
トラックバック(0)

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/105

1 - はびーさん

なんて簡単な！大変助かりました。
ありがとうございます。

2008年12月11日 14:37

2 - えどさん

>>1 - はびーさん
コメントありがとうございます(*'-')
お役に立てたようでよかったです！

2008年12月12日 09:50

3 - えちぜんやさん

はじめまして、えちぜんやと申します。
iframeの処理に困ってネットをうろうろしておりました。

ぜひこちらのスクリプトを使用させていただきたいのですが、商用利用は可能でしょうか？（先日メールを送らせてただきましたが、こちらにもコメントいたしました。）

よろしくお願いいたします。

2009年1月26日 15:46

4 - えどさん

>>3 - えちぜんやさん
すみません、メールが迷惑メールに入っていたために気づきませんでした；
こちらのスクリプトは特にライセンスなどは設けていないので、
ご自由に使っていただいて結構です。

サイトの内容がわからないのであれですが、
もし可能なようであれば「ここから拝借しましたよー」という紹介を
していただけるとうれしかな、という程度です。

サイトの内容的にむずかしいようであれば
特に書いていただかなくてもかまいません。

2009年1月26日 16:22

5 - えちぜんやさん

> えどさん

ご返事ありがとうございました。
可能であれば紹介させていただきます。

また機会を見てブログなどでも、紹介させていただきたく思ってます。
この度はありがとうございました。

2009年1月26日 16:32

6 - トリさん

はじめまして。
iframeの高さに困っていて辿り着きました。
試しに使わせていただいたのですが、
safariとGoogle Chromeだけが反応せず；；
デモですとsafariでも正常に動くのですが
親ページがphpファイルだと動かないのでしょうか・・

2009年5月12日 19:09

7 - DJGRAPE さん

IE7でも正常に動作しますでしょうか？

組み込んでみましたが、

SAFARI3.2　正常に動作
FIEFOX3.0　正常に動作
IntenetExplore7.0　正常にリサイズしません

のような結果でした。

2009年5月12日 20:58

8 - えどさん

>>6 - トリさん
えぇと、ちょっと実物を見てみないと原因特定は難しいですが、
思い当たる点としては、もしかして iframe で読み込んでいるページが
別ドメインのものではありませんか？

ブラウザはセキュリティの観点から
別ドメインのページを読み込んでいる iframe の場合、
JavaScript はその中の要素にアクセスできません。

このスクリプトは、iframe 内のコンテンツの高さを計算し、
それを元にリサイズを行うようになっています。
そのため、iframe 内の要素にアクセスできない場合、
当然ながらコンテンツの高さを計算できないために
iframe のリサイズができない、ということになります。

2009年5月13日 10:17

9 - えどさん

>>7 - DJGRAPEさん
IE7 でも正常に動作した・・はずです；
正常にリサイズされない、というのはどういう状態になりましたか？
サイズが違うのか、まったくリサイズされないのか。

ちなみにデモでもダメでしたか？

2009年5月13日 10:19

10 - トリさん

レスありがとうございます。
ドメインは同ドメインの同じディレクトリに置いているんです。
他サイト様のスクリプトでも試したのですがsafariが全く反応せず・・

ちなみにIE7ですと、デモの場合、若干高さが足りずに（10pxくらい？）スクロールバーが表示されたままになりますが、自サイトで試したところIE7で正常に動作しました。
firefox最新版でも動くのを確認しました。

ブラウザの設定かな。。と思ったのですが
javascriptは有効にはしているので謎です＞＜

2009年5月13日 11:38

11 - トリさん

たびたび失礼します。
親ページであるphpファイルからiframe部分のソースだけhtmlに移してみても
safari,クロームだけだめでした；
親ページには１つしかインラインフレームを置いていないので
ダウンロードしたjsファイルは編集を加えていないです。

2009年5月13日 12:06

12 - ごましおさん

はじめまして。
高さ調整に苦戦していましたが、
こちらのスクリプトを使用させていただいたところ、
思い通りの動作をしてくれました。

大変参考になりました。ありがとうございます。

2009年5月25日 02:00

13 - えどさん

>>11 - トリさん
返事遅くなってすみません；
デモで、問題なく動作しているとしたら
もしかしたら作られているサイトと
モードが違うのかもしれません。
（いちおうそれもチェックはしているのですが・・）

もし可能でしたら、サイト上部にある「問い合わせ」から
該当のサイトの URL を送っていただければ確認したいと思います。

2009年5月25日 09:34

14 - えどさん

>>12 - ごましおさん
コメントありがとうございます(*'-')
お役に立てたようでよかったです！

2009年5月25日 09:35

15 - トリさん

レスありがとうございます！
先ほどお問い合わせからご連絡いたしました。
お時間のある時に見ていただけると嬉しいです。

2009年5月26日 14:43

16 - 序曲さん

はじめまして。
古いCGIを最近作成したサイトに埋め込む際に使わせていただきました。
非常に重宝しております、ありがとうございます。

> リサイズが効かない場合がある
私もハマりました・・。
ちょっと調べたんですが、iframeで読んでいるコンテンツが互換モードで表示されている場合に限って、リサイズが効かない状態でした。
古いCGI側のDOCTYPE宣言を書き直して、標準モードで表示させたらすんなりとリサイズされました( ´∀｀)ｂ
一応参考までに・・

2009年6月23日 17:14

17 - えどさん

>>16 - 序曲さん
コメントありがとうございます！
互換モードの場合はうまく動かないんですね。
それもやったつもりだったんだけどなぁ・・(;´Д｀)

テストケースは、自分ひとりだとどうしても穴ができてしまうので
こういったフィードバックはとても助かります(*'-')
ありがとうございました！

2009年6月23日 17:20