別ウィンドウを画面中央に表示するJavaScript入門

画面サイズから左と上の余白を導き出す

ウィンドウを画面中央に表示するには、画面サイズからサブウィンドウのサイズを引いて、その値を２で割った数値を余白に設置します。

（画面横幅－別窓横幅）÷２＝左右の余白

（画面縦幅－別窓縦幅）÷２＝上下の余白

画面サイズの取得方法は、以下の通りです。

screen.width

画面の横幅を取得します

screen.height

画面の縦幅を取得します

こうして取得した縦横の余白を、window.open()のオプションパラメーター、 leftとtopに指定すればＯＫです。 パラメーターと変数を繋ぐときは、一度クォーテーションを閉じて「 + 」を使って結びます。

ただ、実際にはデスクトップにタスクバーがありますし、 別窓もタイトルバーがあるので厳密な意味で中央には表示されません。 このページで大体中央にと述べているのは、そういう意味です。

別窓を画面中央に表示する関数

では640×480のウィンドウを画面中央に表示してみます。 HTMLのbodyに以下のように記入してみてください。

<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>

<form>
<input type="button" value="中央表示" onclick="winCenter()">
</form>

サブウィンドウが画面中央に表示されれば成功です。