ITコラム

Computer with Business Icons

JavaScript

2017.11.30

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

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(
        "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>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.