サブウィンドウのサイズと位置
前のページでサブウィンドウを表示する方法を見ましたが、 このページでは新しいウィンドウのサイズと位置を指定する方法について解説します。
別ウィンドウのサイズと位置を指定する
以下の関数を、HTMLのヘッダーに記入してみてください。
<script>
function subwin(jpURL){
window.open(jpURL,"","width=640,height=480,top=0,left=0");
}
</script>
次に、body内にフォームタグとボタンを記入し、onclickイベントに以下のように記して下さい。
<form>
<input type="button" value="TOPへ"
onclick="subwin('http://pori2.net/')">
</form>
下のボタンはそのサンプルです。当サイトのトップページ（http://pori2.net/） が小さめのサブウィンドウ（640×480ピクセル）に表示されます。
window.open()の位置とサイズの指定方法
では、window.open()のサイズと位置を指定するオプションパラメーターの解説をします。 window.openのカッコ内は、以下のような順番で設定していきます。
- window.open("URL","ウィンドウ名","オプション")
- オプションを指定したサブウィンドウを表示します。
最初の「URL」と2番目の「ウィンドウ名」は前のページで説明しました。 このページでは3番目の「オプション」のうち、サイズと位置を指定するパラメーターについて考えます。 そのパラメーターとは、以下のものです。
- width
- ウィンドウの横幅を指定します。サンプルでは640ピクセル。
- height
- ウィンドウの縦幅を指定します。サンプルでは480ピクセル。
- top
- デスクトップ上端からの距離です。サンプルでは0ピクセル。
- left
- デスクトップ左端からの距離です。サンプルでは0ピクセル。
オプション全体は、クォーテーションで括り、 各パラメーターはコンマで区切ります。 各オプションの順番は特に決まりはありません。
ただ、このサブウィンドウにはスクロールバーが表示されていないかも知れません。 これはブラウザによって若干違うのですが、Internet Explorer 8とFireFox 3.5では表示されません。 つまりスクロールできない状態にあります。（Windows版のSafari4.0では表示されます）。
このスクロールバーや、ツールバーの表示のON/OFFも、 オプションパラメーターで設定できます。 次のページでは、そうした設定について解説してみます。