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がリサイズされます。
トラックバック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