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

更新日:2018.09.20
  1. HOME
  2. JavaScript入門
  3. 別ウィンドウを画面中央に表示する

ここでは、サブウィンドウを大体画面の中央に表示する方法について考えます。 画面サイズはそれぞれのPCで違うので、 wiondow.open()のオプションパラメーター、leftとtopの値を決めるのに一工夫必要となります。

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

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

(画面横幅-別窓横幅)÷2=左右の余白

(画面縦幅-別窓縦幅)÷2=上下の余白

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

screen.width
画面の横幅を取得します
screen.height
画面の縦幅を取得します

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

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

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

では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>
サンプル

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

楽天booksのJavaScript解説本