別ウィンドウを画面中央に表示する
ここでは、サブウィンドウを大体画面の中央に表示する方法について考えます。 画面サイズはそれぞれのＰＣで違うので、 wiondow,open()のオプションパラメーター、leftとtopの値を決めるのに一工夫必要となります。
別窓を画面中央に表示する関数
では640×480のウィンドウを画面中央に表示してみます。 HTMLのヘッダーに以下のように記入してみてください。
<script>
function winCenter(){
//別窓の左と上の余白を求める
var w = ( screen.width-640 ) / 2;
var h = ( screen.height-480 ) / 2;
//オプションパラメーターleftとtopに余白の値を指定
window.open("../index.html","","width=640,height=480"
+",left="+w+",top="+h);
}
</script>
そしてBODY内にフォームとボタンを設置し、関数winCenter()を呼び出します。
<form>
<input type="button" value="中央表示" onclick="winCenter()">
</form>
上記の例では、このJavaScript入門のINDEXページがサブウィンドウに表示されます。 ウィンドウが大体画面の中央に表示されたでしょうか？
画面サイズから左と上の余白を導き出す
では、上記のスクリプトについて見ていきましょう。 まず「 w 」と「 h 」という二つの変数を宣言しました（widthとheightの頭文字のつもり）。 その右辺にあるscreen.widthが画面の横幅、 screen.heightが画面の縦幅を取得する命令です。
- screen.width
- 画面の横幅を取得します
- screen.height
- 画面の縦幅を取得します
画面横幅から別窓横幅を引くと、横の余白が求められます。 それを２で割っていますが、余白を半分にして別窓の右と左に均等に振り分けています。 （縦に関しても同じように考えます）。
（画面横幅－別窓横幅）÷２＝左右の余白
こうして取得した縦横の余白を、window.open()のオプションパラメーター、 leftとtopに指定すればＯＫです。 パラメーターと変数を繋ぐときは、一度クォーテーションを閉じて「 + 」を使って結びます。
ただ、実際にはデスクトップにタスクバーがありますし、 別窓もタイトルバーがあるので厳密な意味で中央には表示されません。 このページで大体中央にと述べているのは、そういう意味です。
次のページでは、サブウィンドウを開いた後に移動する方法について解説します。