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

Computer with Business Icons

JavaScript では、window.open メソッドを使用して、新たなウィンドウを開くことができます。
今回は、window.open メソッドの使い方を紹介します。

目次

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

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(
        "http://www.recipi.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('http://www.recipi.jp/',
                          '_blank',
                          'menubar=0,width=300,height=200,top=100,left=100');">  
</div>

▲目次へ戻る

 

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

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

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

  
  

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

<script type="text/javascript">
<!--
var winObj;

function openWin() {
    winObj = window.open(
             "http://www.recipi.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('http://www.recipi.jp/',
                 '_blank',
                 'width=300,height=200');">  
        <input type="button" value="開いたウィンドウを閉じる"
         onClick="if (winObj.closed == false) winObj.close();">  
    </div>
</div>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です