JavaScript【 window.open 】 ～ ウィンドウを開く
JavaScript では、window.open メソッドを使用して、新たなウィンドウを開くことができます。
今回は、window.open メソッドの使い方を紹介します。
１．window.open メソッド
JavaScript で別ウインドウを開く場合は、window オブジェクトの open メソッド（ window.open ）を使用します。
window.open メソッドは、次のように記述して使用します。
|
1 |
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 となります。
２．新たにウィンドウを開く
幅300px、高さ200px の新たなウィンドウを、上端から 100px、左端から 100pxの位置に開きます。 「 新たにウィンドウを開く 」ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> <!-- function openWin() { window.open( "https://jichikaichoukai.pw/", "_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 属性に直接記述することもできます。
|
1 2 3 4 5 6 |
<div style="background-color : #CCC;"> <input type="button" value="新たにウィンドウを開く" onClick="window.open('https://jichikaichoukai.pw/', '_blank', 'menubar=0,width=300,height=200,top=100,left=100');"> </div> |
３．開いたウィンドウを閉じる
window.open メソッドを使用して新たに開いたウィンドウを、閉じることもできます。 「 新たにウィンドウを開く 」ボタンをクリックした後、「 開いたウィンドウを閉じる 」ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript"> <!-- var winObj; function openWin() { winObj = window.open( "https://jichikaichoukai.pw/", "_blank", "width=300,height=200" ); } function closeWin(){ if( (winObj) && (!winObj.closed) ){ winObj.close(); } else{ alert('サブウインドウは開かれていません'); } winObj = null; } //--> </script> |
window.open メソッドの返り値を変数winObj に代入して、window オブジェクトの close メソッドを使って winObj が示しているウィンドウを閉じています。
閉じる対象となるウィンドウが存在するか（開かれているか）を「 if( (winObj) && (!winObj.closed) ) 」という条件で確認しています。
window.open メソッドと同様に、window.close メソッドも、input 要素の OnClick 属性に直接記述することができます。
|
1 2 3 4 5 6 7 8 9 10 |
<div style="background-color : #CCC;"> <div style="display:inline-flex;"> <input type="button" value="新たにウィンドウを開く" onClick="winObj=window.open('https://jichikaichoukai.pw/', '_blank', 'width=300,height=200');"> <input type="button" value="開いたウィンドウを閉じる" onClick="if (winObj.closed == false) winObj.close();"> </div> </div> |
