ITコラム

プログラミングノウハウ

2017.11.30

#JavaScript入門

JavaScript【window . open】ウィンドウを開く

JavaScript では、window.openメソッドを使用して、新たなウィンドウを開くことができます。
今回は、window.openメソッドの基本の使い方と指定可能な引数、またwindow.open メソッドを使ってウィンドウを閉じる方法を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日：2023年7月11日

1. window.openメソッド
2. 新たにウィンドウを開く
3. 開いたウィンドウを閉じる
4. まとめ

1. window.openメソッド

　
JavaScript で別ウインドウを開く場合は、window オブジェクトのopenメソッド（ window.open ）を使用します。

window.openメソッドは、次のように記述して使用します。

window.open(URL, ウィンドウ名[, オプション])

第 1 引数の「 URL 」には、生成されるウィンドウに表示するサイトの URL を指定します。
　
第 2 引数の「ウィンドウ名」には、_blank などのターゲット属性値またはウィンドウ名を指定します。
特に指定する必要がなければ、null を記述します。
第 2 引数に指定可能な値は次の通りです。

値	内容
_blank	新規ウィンドウにドキュメントを読み込む
_self	現在のフレームまたは現在のウィンドウにドキュメントを読み込む
_parent	親フレームにドキュメントを読み込む
_top	フレーム分割時のトップフレームにドキュメントを読み込む（フレーム分割を解除することになる）
ウィンドウ名	<a>要素や<form>要素などのターゲット属性で使用し、ターゲットにすることができる

　
第 3 引数の「オプション」には、ウィンドウの仕様を設定するために、下記のパラメータの値をカンマ区切りで指定します。
オプションは省略可能で、省略するとブラウザの新規ウィンドウと同じ仕様になります。
第 3 引数に指定可能なパラメータの主要なものは次の通りです。

パラメータ	値	内容
width	数値（ピクセル値）	ウィンドウ幅
height	数値（ピクセル値）	ウィンドウ高さ
left	数値（ピクセル値）	ウィンドウ位置左
top	数値（ピクセル値）	ウィンドウ位置上
menubar	yes（1）または no（0）	メニューバーの有無
toolbar	yes（1）または no（0）	ツールバーの有無
location	yes（1）または no（0）	アドレスバーの有無
status	yes（1）または no（0）	ステータスバーの有無
resizable	yes（1）または no（0）	リサイズの可否
scrollbars	yes（1）または no（0）	スクロールバーの有無

　
window.openメソッドの返り値は、ウィンドウの生成に成功した場合は生成されたウィンドウオブジェクト、失敗した場合は null となります。

▲目次へ戻る

2. 新たにウィンドウを開く

　
幅300px、高さ200px の新たなウィンドウを、上端から 100px、左端から 100pxの位置に開きます。

「新たにウィンドウを開く」ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function openWin() {
    window.open(
        "https://programmercollege.jp/",
        "_blank",
        "menubar=0,width=300,height=200,top=100,left=100"
    );
}
</script>

<div style="background-color : #CCC;">
    <input type="button" value="新たにウィンドウを開く" onClick="openWin()">　　
</div>

　
また、次のように、window.openメソッドを、input 要素の OnClick 属性に直接記述することもできます。

<div style="background-color : #CCC;">
    <input type="button" value="新たにウィンドウを開く"
     onClick="window.open('https://programmercollege.jp/',
                          '_blank',
                          'menubar=0,width=300,height=200,top=100,left=100');">　　
</div>

▲目次へ戻る

3. 開いたウィンドウを閉じる

　
window.openメソッドを使用して新たに開いたウィンドウを、閉じることもできます。

「ウィンドウを開く」ボタンをクリックした後、「ウィンドウを閉じる」ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
let winObj;

function openWin() {
    winObj = window.open(
             "https://programmercollege.jp/",
             "_blank",
             "width=300,height=200"
    );
}

function closeWin(){
  if( (winObj) && (!winObj.closed) ){
    winObj.close();
  }
  else{
    alert('サブウインドウは開かれていません');
  }
  winObj = null;
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <div style="display:inline-flex;">
        <input type="button" value="新たにウィンドウを開く" onClick="openWin()">　　
        <input type="button" value="開いたウィンドウを閉じる" onClick="closeWin()">　　
    </div>
</div>

　
window.openメソッドの返り値を変数winObj に代入して、window オブジェクトの closeメソッドを使って winObj が示しているウィンドウを閉じています。
閉じる対象となるウィンドウが存在するか（開かれているか）を「 if( (winObj) && (!winObj.closed) ) 」という条件で確認しています。

　
window.openメソッドと同様に、window.closeメソッドも、input 要素の OnClick 属性に直接記述することができます。

<div style="background-color : #CCC;">
    <div style="display:inline-flex;">
        <input type="button" value="新たにウィンドウを開く"
         onClick="winObj=window.open('https://programmercollege.jp/',
                 '_blank',
                 'width=300,height=200');">　　
        <input type="button" value="開いたウィンドウを閉じる"
         onClick="if (winObj.closed == false) winObj.close();">　　
    </div>
</div>