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

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

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

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

トラックバックURL

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

1 - はびーさん

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

2008年12月11日 14:37

2 - えどさん

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

2008年12月12日 09:50

3 - えちぜんやさん

はじめまして、えちぜんやと申します。niframeの処理に困ってネットをうろうろしておりました。nぜひこちらのスクリプトを使用させていただきたいのですが、商用利用は可能でしょうか？（先日メールを送らせてただきましたが、こちらにもコメントいたしました。）nよろしくお願いいたします。

2009年1月26日 15:46

4 - えどさん

>>3 - えちぜんやさんすみません、メールが迷惑メールに入っていたために気づきませんでした；nこちらのスクリプトは特にライセンスなどは設けていないので、nご自由に使っていただいて結構です。nサイトの内容がわからないのであれですが、nもし可能なようであれば「ここから拝借しましたよー」という紹介をしていただけるとうれしかな、という程度です。nサイトの内容的にむずかしいようであれば特に書いていただかなくてもかまいません。n

2009年1月26日 16:22

5 - えちぜんやさん

> えどさんご返事ありがとうございました。n可能であれば紹介させていただきます。nまた機会を見てブログなどでも、紹介させていただきたく思ってます。nこの度はありがとうございました。n

2009年1月26日 16:32

6 - 元3 さん

あまり深く追究したくないのでテキトーに使ってみましたが、テキトーにいけそうですｗn本来どのパラメーターがどう関連して結果どう表現されるというのがあると思いますが、失礼ながらテキトーに使わせていただきます。nありがとうございました。nなお、感謝の気持ちを届けたいだけなので、できればコメント不承認のままを希望いたします。n以上、よろしくお願いいたします。

2009年4月11日 01:05

7 - トリさん

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

2009年5月12日 19:09

8 - DJGRAPE さん

IE7でも正常に動作しますでしょうか？n組み込んでみましたが、nSAFARI3.2　正常に動作nFIEFOX3.0　正常に動作nIntenetExplore7.0　正常にリサイズしませんのような結果でした。

2009年5月12日 20:58

9 - えどさん

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

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

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

2009年5月13日 10:17

10 - えどさん

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

サイズが違うのか、まったくリサイズされないのか。
ちなみにデモでもダメでしたか？

2009年5月13日 10:19

11 - トリさん

レスありがとうございます。nドメインは同ドメインの同じディレクトリに置いているんです。n他サイト様のスクリプトでも試したのですがsafariが全く反応せず・・ちなみにIE7ですと、デモの場合、若干高さが足りずに（10pxくらい？）スクロールバーが表示されたままになりますが、自サイトで試したところIE7で正常に動作しました。nfirefox最新版でも動くのを確認しました。nブラウザの設定かな。。と思ったのですがjavascriptは有効にはしているので謎です＞＜n

2009年5月13日 11:38

12 - トリさん

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

2009年5月13日 12:06

13 - ごましおさん

はじめまして。n高さ調整に苦戦していましたが、nこちらのスクリプトを使用させていただいたところ、n思い通りの動作をしてくれました。n大変参考になりました。ありがとうございます。

2009年5月25日 02:00

14 - えどさん

>>11 - トリさん返事遅くなってすみません；nデモで、問題なく動作しているとしたらnもしかしたら作られているサイトとモードが違うのかもしれません。n（いちおうそれもチェックはしているのですが・・）nもし可能でしたら、サイト上部にある「問い合わせ」からn該当のサイトの URL を送っていただければ確認したいと思います。

2009年5月25日 09:34

15 - えどさん

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

2009年5月25日 09:35

16 - トリさん

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

2009年5月26日 14:43

17 - 序曲さん

はじめまして。n古いCGIを最近作成したサイトに埋め込む際に使わせていただきました。n非常に重宝しております、ありがとうございます。n> リサイズが効かない場合がある私もハマりました・・。nちょっと調べたんですが、iframeで読んでいるコンテンツが互換モードで表示されている場合に限って、リサイズが効かない状態でした。n古いCGI側のDOCTYPE宣言を書き直して、標準モードで表示させたらすんなりとリサイズされました( ´∀｀)ｂn一応参考までに・・

2009年6月23日 17:14

18 - えどさん

>>16 - 序曲さんコメントありがとうございます！n互換モードの場合はうまく動かないんですね。nそれもやったつもりだったんだけどなぁ・・(;´Д｀)テストケースは、自分ひとりだとどうしても穴ができてしまうのでこういったフィードバックはとても助かります(*'-')ありがとうございました！

2009年6月23日 17:20

19 - まるさん

はじめまして。nwordpressを使用して、サイト内にiframeとして読み込んでいたのですが、高さの自動調節に関して困っていました。こちらのサイトにまさにその答えがあって感激しました！n早速ためしたところ、nVer.1.1ではFireFox（ver.3.5.2）では一瞬表示されて消えてしまい、safari（ver.4.0.3/ver.3.2.1）では正常に表示され、nVer.2.0では逆で、safariは一瞬表示されて消えてしまい、FireFoxでは正常に表示されます。nIE環境では正常に表示されました。n他の方は正常に表示されているということで、私だけのPC環境かもしれませんが、、回答いだだけましたらありがたいです。n何卒、よろしくお願いいたします。n

2009年8月25日 16:29

20 - えどさん

>>18 - まるさんコメントありがとうございます。nいちおう、こちらでテストしたときは問題なかったのですがHTML の記述の仕方によっては変化があるかもしれません。n（いちおうそれもある程度想定はしているのですが・・）nなので、問題の起きているサイトを確認しないと、n現時点ではなんとも言えません・・。nできれば、ページ上部にある「お問い合わせフォーム」からn該当のサイトの URL をご連絡頂けると確認できるので助かります。nご連絡いただくことは可能でしょうか？

2009年8月25日 17:17

21 - だんごさん

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

2009年12月 7日 17:14

22 - えどさん

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

2009年12月 7日 17:39

23 - audioslave さん

はじめまして。audioslaveといいます。r現在joomla!でwebページを作成していまして、riframeでの高さ自動調整に困っていたところこちらにたどり着きました。rjavascriptも全くわからない状況なので、r加えるだけで簡単に利用できるので大変助かりました。rありがとうございます。rrよろしければアドバイスをいただきたいのですが、r先ほど言いましたwebページでIEのでの実行確認ができました。rですが、firefoxとoperaの方でうまく反映されません。。。rurlでの値渡しでやっているのですが、何が原因なのかわかりません。r恐れ入りますが、アドバイス頂けるとありがたいです。rよろしくお願いします。

2009年12月10日 18:29

24 - えどさん

>>22 - audioslaveさんコメントありがとうございます。nFirefoxとOperaでうまく反映されないとのことですが、nちょっとそれだけの情報だと原因がわかりかねます・・。nなので実際に見てみないとなんとも言えません。nもし可能であれば、問い合わせフォームからURLを送っていただくなどしていただけると助かります。n他にも同様に問題が発生している方もいるかもしれないので送っていただけるとうれしいです。n

2009年12月11日 23:24

25 - パパインさん

はじめまして。nfit_ifr2.0の場合、私の環境ではIE68、Firefox23.5で正常に動作しませんでした事報告させて頂きます。n常に動作しなかったのではなく、nログインを必要とするCMS内に限った状況ではあります。nとは言え、ログインが必要ではある物の、html自体は通常のものと特に変わりないので、n何に影響を受けたのかは解りませんでした。nただ2.0はダメでしたが、fit_ifr1.1では、IEやFirefoxでも問題なく動作しましたので有り難く使用させて頂きました。n心よりお礼申し上げます。

2009年12月22日 12:36

26 - INDYTECH さん

他の方法で試したところFireFoxでうまくゆかず困っていましたが
fit_ifr2.0 にてIE8、FireFox、Safariでもほぼ期待通りの動作ができました。
ありがとうございました。

追加質問で恐縮ですが、iFrame内に表示するのページから別ページに変わる毎に再度 fitIfr() を実行させることは可能でしょうか?
現在はとしているので、最初に表示されたページサイズのままになっています。
ご教示いただければ幸いです。

2010年2月20日 11:30

27 - えどさん

>>24 - パパインさん
コメントありがとうございます！

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

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

2010年2月21日 23:17

28 - えどさん

>>25 - INDYTECH さん
コメントありがとうございます！

ご質問の件ですが、iframe 内に表示されるものがそれほど多くないのであればiframe 内に表示されるページから、親の fitIfr() を呼ぶことによって対応は可能だと思います。

検討してみてください。

2010年2月21日 23:21

29 - tomo さん

助かりました。やはり最後はここですね！色々巡って、またこちらにたどり着きました。ブックマークしてたのに、ググってハマってしまった。

2011年8月 9日 00:57

30 - えどさん

>>tomoさん
コメントありがとうございます！　色々と見ていただいているようでうれしいです。
ブックマークって意外と忘れますよねｗ
で、見つけて「あ、なんか見たことあるぞ・・」みたいなｗ

2011年8月11日 09:51

31 - ベーツーさん

こんにちは、はじめまして
fit_ifr2.0.jsの動作についてお聞きしたい事がありまして書き込ませてもらいました

環境はテストページを作り、オンライン上でテストをしていました
fit_ifr2.0.jsをそのまま変更せずにjsファイルとして使い、内に設置、
htmlはbodyにgoogleのイメージ/テキスト広告を1つ設置、その後にiframeを表示させているだけです
それ以外はテキストすらも無い状態です

Firefoxは6.0と3.6.13で試してみました
このJavascriptを使用すると同ページに設置しているGoogleの広告が消去(空白状態)されてしまいました
ちなみにGoogle Chrome13.0.782.112、Safari5.1でも同じくGoogleの広告が消える現象が見られました
どちらともfit_ifr2.0.jsはちゃんと機能はしていました

Opera11.50では高さ700px程度ぐらい(子フレームの半分？)までは表示されますが、そこから切れてしまっていました
あとタグを記載していると完全にfit_ifr2.0.jsが機能しなくなりました
こちらはGoogleの広告表示に関しては何も問題はありませんでしたが、Googleの広告を除去すると上記2つの問題は無くなりました
しかし今回のテストページでは上記の動作になりましたが、普通の中身のあるページだとiframeの子ページが縦に長くても、があろうとも完璧に動作してくれました
自分では何が原因なのかサッパリわからなかったのでご報告させてもらいました

IE9はブラウザモードのIE7と互換表示で×、ドキュメントモードはQuirksモードで×でしたが、
IE8、IE9はどちらのモードでも問題ありませんでしたので大丈夫そうでした

Googleの広告を設置している場合、何か解決策はありますでしょうか？
もしもお時間がありましたらご教示いただければ幸いです。

2011年8月19日 12:09

32 - えどさん

>ベーツーさん
コメントありがとうございます。
ご指摘の現象ですが、実際にテストされたURLは教えていただくことは可能でしょうか？
広告もiframeを使用していると思われるので、今回のJSがなにか影響していることは考えられます。
ただ、以前のversionのブラウザではそうした現象がなかったので
もしかしたらアップデートされたブラウザによる現象かもしれません。

原因特定のため、テストしているURLを教えていただけると助かります。
よろしくお願いします。

2011年8月20日 23:32

33 - 匿名さん

PHPのページはページが組まれた後でスクリプトを起動するように
フッターなど、"それ以降にPHPの出てこない部分"でスクリプトを読み込むと正しく動きました。

2012年2月24日 16:13