検索
カレンダー
2019年7月
« 4月    
 123456
78910111213
14151617181920
21222324252627
28293031  
ブログメニュー
Amazon検索
キーワード:

iframeのサイズを動的に変えるには

2007年8月8日

XHTML1.1ではiframeがなくなることもあり、将来的には使う機会は減っていくだろうと思われますが、iframeの小技を一つ。

iframeは別のHTMLを読み込める便利なものですが、サイズが固定なので同じiframe内で別ページに移動するとスクロールバーが出たりして見づらくなったりしてしまいます。

そこで、 呼び出されたページの中でJavaScriptを使って呼び出し元ページのiframeのサイズを動的に変化させれば、スクロールバーを出なくできるんじゃないかと思って試してみました。

呼び出し先ページのbodyタグのonloadで次の関数を呼び出せば、自動的にフレームサイズが変わります。

function fixFrameSize() {
	if (window.parent) {
		var body = document.body;
		var width = body.scrollWidth;
		var height = body.scrollHeight;

		var iframe = window.parent.document.getElementsByTagName("IFRAME")[0];
		iframe.style.width = width + "px";
		iframe.style.height = height + "px";
		iframe.scrolling = "no";
	}
}

呼び出し元に複数のiframeがある場合にちゃんと動かなかったり、iframeの frameborderを0にする必要があったりしますが、こんな感じでいけるかと思います。

(2013/4/18追記)

body.scrollWidth や body.scrollHeight で正確な値が取れない可能性があることがわかりました。
ブラウザによっては document.documentElement.scrollWidth や document.documentElement.scrollHeight で取得する必要があります。
クロスブラウザ対応にするなら、 両方の値を取って大きい値を使うというようなことをしないといけないかもしれません。
(すいません深くは調べてないです)

5件のコメント »

  1. ハミルトン ベンチュラ レディース

    blog topic

    トラックバック by カルティエ 結婚指輪 受け取り — 2019/6/3 @ 18:42:30

  2. ガガミラノ 時計 48

    blog topic

    トラックバック by パネライ エジツィアーノ — 2019/6/10 @ 14:46:14

  3. ハミルトン カーキ ベルト交換

    ある技術者の備忘録

    トラックバック by フランクミュラー カサブランカ 時計 — 2019/6/11 @ 12:15:17

  4. ハミルトン 時計 動かない

    ある技術者の備忘録 » iframeのサイズを動的に変えるには

    トラックバック by ハミルトン 時計 動かない — 2019/6/14 @ 20:41:21

  5. エルメス時計 レディース 価格com 3Ds

    ある技術者の備忘録 » iframeのサイズを動的に変えるには

    トラックバック by エルメス時計 レディース 価格com 3Ds — 2019/6/15 @ 12:30:03

TrackBack URL : http://www.meibinlab.jp/nishijima/archives/83/trackback

コメントする