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

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

更新履歴

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

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

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

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

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

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

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

▼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 がリサイズされます。

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

  • このエントリーをはてなブックマークに追加

トラックバックURL

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

コメント

1 - はびー さん

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

2008年12月11日 14:37

2 - えど Author Profile Pageさん

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

2008年12月12日 09:50

3 - えちぜんや さん

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

2009年1月26日 15:46

4 - えど Author Profile Pageさん

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

2009年1月26日 16:22

5 - えちぜんや さん

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

2009年1月26日 16:32

6 - 元3 さん

あまり深く追究したくないのでテキトーに使ってみましたが、テキトーにいけそうですwn本来どのパラメーターがどう関連して結果どう表現されるというのがあると思いますが、失礼ながらテキトーに使わせていただきます。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 - えど Author Profile Pageさん

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

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

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

2009年5月13日 10:17

10 - えど Author Profile Pageさん

>>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親ページには1つしかインラインフレームを置いていないのでダウンロードしたjsファイルは編集を加えていないです。n

2009年5月13日 12:06

13 - ごましお さん

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

2009年5月25日 02:00

14 - えど Author Profile Pageさん

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

2009年5月25日 09:34

15 - えど Author Profile Pageさん

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

2009年5月25日 09:35

16 - トリ さん

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

2009年5月26日 14:43

17 - 序曲 さん

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

2009年6月23日 17:14

18 - えど Author Profile Pageさん

>>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 - えど Author Profile Pageさん

>>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 - えど Author Profile Pageさん

>>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 - えど Author Profile Pageさん

>>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 - えど Author Profile Pageさん

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

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

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

2010年2月21日 23:17