ある技術者の備忘録

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にする必要があったりしますが、こんな感じでいけるかと思います。