[JavaScript] サブウィンドウを開く（window.open）

投稿日：2016年10月2日更新日：2019年3月23日

JavaScriptでサブウィンドウを開くには、window.open()メソッドを使用します。

サンプルソース

例）幅1000px、高さ600px、リサイズ不可としてサブウィンドウを開く

function openwindow(){
  var win = window.open(
    'http://www.google.co.jp',              //表示するページのURL
    '_blank',                               //ウィンドウ名
    'width=1000, height=600, resizable=no'  //オプション
  );
}

function openwindow(){

var win = window.open(

'http://www.google.co.jp', //表示するページのURL

'_blank', //ウィンドウ名

'width=1000, height=600, resizable=no' //オプション

);

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" value="サブウィンドウを開く" onclick="openwindow();">
</body>
</html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、Googleサイトを別ウィンドウで開きます。

解説

※ window.openの引数には以下の値を指定します。

第１引数：サブウィンドウに表示するページのURL（必須）
第２引数：サブウィンドウの名称（省略可）
第３引数：オプションパラメータ（省略可）

第１引数のURLは「http://」で始まる絶対パスでも、「./hoge.html」みたいな相対パスでもどちらでも指定できます。
第２引数のサブウィンドウ名称は、aタグのtarget属性と同様に指定できますので、不必要に同じウィンドウを開くことを防ぐことができます。
（省略時は、"_blank"（常に新規無名ウィンドウを開く）と同じ動きをします。）
第３引数のオプションパラメータはウィンドウのサイズや表示の仕方などをカンマ区切りで指定できます。指定できるオプションパラメータは下記表をご覧ください。

【オプションパラメータ】
プロパティ	意味	設定値
width	幅	数値
height	高さ	数値
top	上位置	数値
left	左位置	数値
right	画面の上端からのサイズ（ピクセル単位）	数値
resizable	リサイズの可/不可	yes/no
scrollbars	スクロールバーの表示/非表示	yes/no
toolbar	ツールバーの表示/非表示	yes/no
menubar	メニューバーの表示/非表示	yes/no
location	アドレスバーの表示/非表示	yes/no
status	ステータスバーの表示/非表示	yes/no
directories	ディレクトリバーの表示の有無	yes/no
titlebar	タイトルバーの表示の有無	yes/no
fullscreen	フルスクリーン表示する（画面いっぱいの表示）	yes/no

yes/no で指定する項目は、1(=yes)または0(=no)でも指定可能です。

その他メモ

タブブラウザの場合、widthまたはheightを指定しないと新規タブに表示されます。新規タブではなく、別ウィンドウで表示したい場合はwidth、heightを指定してください。
サブウィンドウが閉じられているかどうかを判断したい場合は、window.openした時の戻り値（上の例だとwin）に対してclosedを聞いてやれば判断できます。
（例：if(win.closed){～）

執筆者：とら