ITコラム

Computer with Business Icons

JavaScript

2017.11.30

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

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

最終更新日:2021年6月24日

目次

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">
<!--
var 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>

▲目次へ戻る

 

4. まとめ

 
JavaScript の window.openメソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じていらっしゃる方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジは、本気でプログラマを目指す方のための受講料無料の研修所です。

今回ご紹介した「JavaScript」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ

▲目次へ戻る

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.