2011年4月26日火曜日

iframe領域を常にブラウザのサイズとぴったり揃える方法






ブラウザのサイズが変更されても、iframeを常にウィンドウぴったりに表示したい場合、CSSだけでは難しそうでしたのでJavaScriptを使いました。

つまり、ブラウザのリサイズイベントを感知してそのたびにiframeのサイズを変更します。


サンプルページ


http://supersupers7.com/labs/iframe_resize/


ソースコード





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iframeをブラウザのウィンドウサイズと常に揃える方法</title>

</head>

<body style="margin:0px;overflow-y: hidden;overflow-x: hidden;" onresize="resizeFrame()">

<div style="height:200px;border;background-color:pink;">
<font size="20px">ここはヘッダー部分。高さ200PX</font>
</div>

<iframe id="fm" style="width:100%;height:100%" src="http://yahoo.co.jp"></iframe>


</body>

<script type="text/javascript">

function resizeFrame(){


var tmp_height = document.documentElement.clientHeight -201;

//フレームのエレメント取得
var fm_elm = document.getElementById("fm");
fm_elm.style.height = tmp_height +"px";

}

resizeFrame();

</script>

</html>







0 件のコメント:

コメントを投稿