- HOME
- JavaScript入門
- サブウィンドウのサイズと位置
前のページでサブウィンドウを表示する方法を見ましたが、 このページでは新しいウィンドウのサイズと位置を指定する方法について解説します（残念ながらスマートフォンなどではウィンドウの位置やサイズは指定できません）。
window.open()の位置とサイズの指定方法
では、window.open()のサイズと位置を指定するオプションパラメーターの解説をします。 window.openのカッコ内は、以下のような順番で設定していきます。
- window.open("URL","ウィンドウ名","オプション")
- オプションを指定したサブウィンドウを表示します。
最初の「URL」と2番目の「ウィンドウ名」は前のページで説明しました。 このページでは3番目の「オプション」のうち、サイズと位置を指定するパラメーターについて考えます。 そのパラメーターとは、以下のものです。
- width=数値
- ウィンドウの横幅を指定します。
- height=数値
- ウィンドウの縦幅を指定します。
- top=数値
- デスクトップ上端からの距離です。
- left=数値
- デスクトップ左端からの距離です。
オプション全体は、クォーテーションで括り、 各パラメーターはコンマで区切ります。 各オプションの順番は特に決まりはありません。
window.open("../index.html","sub","width=300,height=200,top=0,left=0");
↑このように記述します。
サイズと位置を指定して別ウィンドウを開くサンプル
HTMLに以下のように記述してみてください。
<script>
function subwin(jpURL){
window.open(jpURL,"","width=640,height=480,top=0,left=30");
}
</script>
<form>
<input type="button" value="TOPへ"
onclick="subwin('https://www.pazru.net/')">
</form>
上のボタンを押すと当サイトのトップページが別窓で表示されます。サンプルでは、以下のように指定してます。
- 横幅：640px
- 縦幅：480px
- 上余白：0px
- 左余白：30px
目的の位置と大きさで表示されているでしょうか？PCの主要ブラウザでは表示されていると思います。iPhoneやAndroidでは新たなタブで表示されるので、指定したような位置とサイズにはなりません。