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 );
}

この記事のカテゴリー一覧を見る⇒Javascript小技

パーマリンク
コメント(27)
トラックバック(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

18 - まるさん

はじめまして。
wordpressを使用して、サイト内にiframeとして読み込んでいたのですが、高さの自動調節に関して困っていました。こちらのサイトにまさにその答えがあって感激しました！
早速ためしたところ、
Ver.1.1ではFireFox（ver.3.5.2）では一瞬表示されて消えてしまい、safari（ver.4.0.3/ver.3.2.1）では正常に表示され、
Ver.2.0では逆で、safariは一瞬表示されて消えてしまい、FireFoxでは正常に表示されます。
IE環境では正常に表示されました。

他の方は正常に表示されているということで、私だけのPC環境かもしれませんが、、回答いだだけましたらありがたいです。
何卒、よろしくお願いいたします。

2009年8月25日 16:29

19 - えどさん

>>18 - まるさん
コメントありがとうございます。
いちおう、こちらでテストしたときは問題なかったのですが
HTML の記述の仕方によっては変化があるかもしれません。
（いちおうそれもある程度想定はしているのですが・・）

なので、問題の起きているサイトを確認しないと、
現時点ではなんとも言えません・・。
できれば、ページ上部にある「お問い合わせフォーム」から
該当のサイトの URL をご連絡頂けると確認できるので助かります。

ご連絡いただくことは可能でしょうか？

2009年8月25日 17:17

20 - だんごさん

はじめまして。
iframeにcgiを呼び出す時に、高さの変動で苦心していました。
こちらのサイトを拝見してスクリプトを使用したところ
問題が解決しました。
本当にありがとうございます！感謝感謝です。

2009年12月 7日 17:14

21 - えどさん

>>20 - だんごさん
コメントありがとうございます！
お役に立てたようでよかったです。
ぜひぜひご活用ください。

2009年12月 7日 17:39

22 - audioslave さん

はじめまして。audioslaveといいます。
現在joomla!でwebページを作成していまして、
iframeでの高さ自動調整に困っていたところこちらにたどり着きました。
javascriptも全くわからない状況なので、
加えるだけで簡単に利用できるので大変助かりました。
ありがとうございます。

よろしければアドバイスをいただきたいのですが、
先ほど言いましたwebページでIEのでの実行確認ができました。
ですが、firefoxとoperaの方でうまく反映されません。。。
urlでの値渡しでやっているのですが、何が原因なのかわかりません。
恐れ入りますが、アドバイス頂けるとありがたいです。
よろしくお願いします。

2009年12月10日 18:29

23 - えどさん

>>22 - audioslaveさん
コメントありがとうございます。
FirefoxとOperaでうまく反映されないとのことですが、
ちょっとそれだけの情報だと原因がわかりかねます・・。
なので実際に見てみないとなんとも言えません。

もし可能であれば、問い合わせフォームから
URLを送っていただくなどしていただけると助かります。
他にも同様に問題が発生している方もいるかもしれないので
送っていただけるとうれしいです。

2009年12月11日 23:24

24 - パパインさん

はじめまして。
fit_ifr2.0の場合、私の環境ではIE6～8、Firefox2～3.5で
正常に動作しませんでした事報告させて頂きます。

常に動作しなかったのではなく、
ログインを必要とするCMS内に限った状況ではあります。
とは言え、ログインが必要ではある物の、html自体は通常のものと特に変わりないので、
何に影響を受けたのかは解りませんでした。

ただ2.0はダメでしたが、fit_ifr1.1では、IEやFirefoxでも問題なく動作しましたので
有り難く使用させて頂きました。
心よりお礼申し上げます。

2009年12月22日 12:36

25 - INDYTECH さん

他の方法で試したところFireFoxでうまくゆかず困っていましたが
fit_ifr2.0 にてIE8、FireFox、Safariでもほぼ期待通りの動作ができました。
ありがとうございました。
追加質問で恐縮ですが、iFrame内に表示するのページから別ページに変わる毎に
再度 fitIfr() を実行させることは可能でしょうか?
現在はとしているので、最初に表示されたページサイズのままになっています。
ご教示いただければ幸いです。

2010年2月20日 11:30

26 - えどさん

>>24 - パパインさん
コメントありがとうございます！
とりあえず無事動いたようでよかったです。
たまに問題が発生する場合があるので指摘される度修正してはいるのですが、
CSS の兼ね合いなどでケーススタディがむずかしいというのもあります・・。

公開できるものであれば、その URL を教えていただくなどして
ご指摘いただければ幸いです。

2010年2月21日 23:17

27 - えどさん

>>25 - INDYTECH さん
コメントありがとうございます！
ご質問の件ですが、iframe 内に表示されるものがそれほど多くないのであれば
iframe 内に表示されるページから、親の fitIfr() を呼ぶことによって対応は可能だと思います。
検討してみてください。

2010年2月21日 23:21