JavaScriptでサブウィンドウを表示する方法を解説。

HOME
更新日:2013.10.04
HOMEJavaScript入門 > サブウィンドウを表示する

サブウィンドウを表示する

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

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

まずは普通にサブウィンドウを出してみたいと思います。 HTMLのtarget属性と同じ働きをします。 ヘッダーに以下の関数を記入してみて下さい。

<script>

function winOpen(){

window.open("../index.html","sub");

}

</script>

そして、BODY内で関数を呼び出します。(下記例のように)

<form>
<input type="button" value="別窓" onclick="winOpen()">
</form>
←サンプル

上記ボタンを押すと、1つ上の階層のindex.html、 ここではJavaScript入門のTOPページが表示されます。 ではサブウィンドウを出すスクリプトを解説してみることにします。

window.openの解説

上記スクリプトに出てくるwindow.open()というのが、 サブウィンドウを出す命令です。 カッコ内には、最初に表示させるページのURLを、 次はウィンドウ名を指定します。 どちらも文字列ですから、クォーテーションで囲います。

window.open("URL","ウィンドウ名")
指定したウィンドウ名でサブウィンドウを表示させます

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

window.open("../index.html","");

また、サブウィンドウを開く関数は汎用性を持たせるため、 普通は引数を用いて以下のようにします。

<script>

function winOpen(jpURL){

window.open(jpURL,"");

}

</script>

これで関数を呼び出す時、引数にURLを指定すればどのページでも表示できます。 よく使う関数は外部ファイルにしておくと便利です。

次ページでは、サブウィンドウの大きさと表示位置を指定する方法を解説します。