検索
カレンダー
2019年5月
« 4月    
 1234
567891011
12131415161718
19202122232425
262728293031  
ブログメニュー
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 で取得する必要があります。
クロスブラウザ対応にするなら、 両方の値を取って大きい値を使うというようなことをしないといけないかもしれません。
(すいません深くは調べてないです)

コメントはまだありません »

コメントはまだありません。

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

コメントする