サブウィンドウを表示する-JavaScript入門

ここでは、JavaScriptでサブウィンドウを表示する方法について解説します。 HTMLでも別ウィンドウは出せますが、 JavaScriptを利用するとウィンドウの位置や大きさを指定できます。何かと使い道の多いスクリプトですので、是非マスターして下さい。

普通にサブウィンドウを表示する

サブウィンドウを表示するには、以下のように記述します。

ウィンドウ名は、HTMLのターゲット名と同じです。同じウィンドウ名を指定すると、そのウィンドウに指定したページが表示されます。ウィンドウ名を空にすると、target="_blank"と同じことになります。

HTMLに以下のように記述してみてください。

<script>
function winOpen(){
  window.open("../index.html","sub");
}
</script>

<form>
<input type="button" value="別窓" onclick="winOpen()">
</form>

上記ボタンを押すと、1つ上の階層のindex.html、ここではJavaScript入門のTOPページが表示されます。

function winOpen(){
  window.open("../index.html","sub");
}

まず、JavaScriptの関数winOpen()を見てみましょう。中は1行だけです。window.open()がサブウィンドウを表示するスクリプトでした。

window.open()のカッコ内の最初の項目が、表示するURLです。ここでは、このページの一つ上の階層のindex.html、すなわちJavaScript入門のトップページを指定しています。

2つ目の項目はウィンドウ名です。任意に付けることができますが、今回は「sub」にしました。既にsubという名称のウィンドウが表示されていればそのウィンドウに、無ければ新たにウィンドウを作成してそこに第一引数で指定したページを表示します。

<form>
<input type="button" value="別窓" onclick="winOpen()">
</form>

あとは、ボタンのonclickイベントで関数winOpen()を呼び出しています。

外部ファイルでwindow.open()を用いる場合、以下のようにして汎用性を持たせる事ができます。

function winOpen(jpURL){
  window.open( jpURL , "" );

}

こうしておいて、関数を呼び出すときにwinOpen("../index.html")のようにします。関数の引数を変えることで、どんなページでも表示することができます。