| ポイント |
<![CDATA[
window.onresize = rebuild;
function rebuild(){ location.reload();}
]]>
|
| 説 明 |
Mac+NN4、Win+NN4ではウィンドウサイズを変更するとJavaScriptのdocument.write()で出力したデータが表示されず、スタイルシートで設定した情報も一部反映されないためページ全体のスタイルが崩れて表示されてしまいます。これを防ぐにはウィンドウのサイズが変更されたらlocation.reload()で再度ページを読み込むようにします。ウィンドウのリサイズが行われたら処理するには「window.onresize = 処理先関数名」として指定することができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>ウィンドウのリサイズでスタイルが崩れるのを防ぐ</title>
<script Language="JavaScript"><!--
window.onresize = rebuild;
function rebuild(){ location.reload();}
// --></script>
</head>
<body>
<script Langauge="JavaScript"><!--
document.write("Oh!");
// --></script>
<div style="position:absolute;top:20px;left:20px;background-color:yellow;width:100px;height:850px;">スタイルシートで指定</div>
</body>
</html>
]]>
|
| 補足説明 |
UNIX+NN4ではウィンドウサイズを変更してもスタイルが崩れたりdocument.write()で出力したデータが消えることはありません。また、このサンプルではフレームなどを考慮していないためフレームページでは正常に動作しません。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
ウィンドウのリサイズでスタイルが崩れるのを防ぐ