【簡単】javascriptでwindowを閉じる例6つを解説

「javascriptでwindowを閉じる方法と具体的なコードが知りたい」

このようなお悩みを解決する記事です。

本記事の内容

javascriptでwindowを閉じる基本構文
javascriptでwindowを閉じる例6つ

本記事を読むと、javascriptでwindowを閉じる方法についてしっかり理解できるはずです。

では、さっそく見ていきましょう！

1 javascriptでwindowを閉じる基本構文
- 1.1 とはいえ、対策もある
2 javascriptでwindowを閉じる例６つ
3 まとめ

javascriptでwindowを閉じる基本構文

javascriptでwindowを閉じる基本構文は下記の通り。

window.close()

wondow.close()で、現在開かれているwindowを閉じることができます。

ただし、原則としてwindow.open()によって開かれたwebページしか閉じることができないので、ご注意を。

とはいえ、対策もある

「window.open()によって開かれたページしか閉じることができない」と言いましたが、実はこれには対策があります。

それは、一度window.open()で空のページを呼び出して、その上でwindow.close()で閉じるというもの。

これにより、 window.open()で開いていなかったwebページも閉じることができるようになります。

そのため本記事では、こちらの対策方法込みのサンプルコードを用いて解説しています。

※ただし、ブラウザのバージョンアップによってはそれでも警告が表示される場合があります。

javascriptでwindowを閉じる例６つ

では、実際にjavascriptでwindowを閉じる方法について例を６つ解説していきます。下記の通り。

javascriptで自windowを閉じる場合
javascriptで自window(親)からサブwindow(子)を閉じる場合
javascriptで自window(親)から親子関係の無いサブwindowを閉じる場合
javascriptでサブwindow(子)から親windowを閉じる場合
javascriptで自window(親)が閉じた時、サブwindow(子)も閉じる場合
javascriptで自window(親)が閉じた時、親子関係が無いサブwindowを閉じる場合

順番に解説していきますね。

①javascriptで自windowを閉じる場合

<script type="text/javascript">

// 自windowを閉じる
function winClose(){
  open('about:blank', '_self').close();    //一度再表示してからClose
}

</script>

// 自windowを閉じる

function winClose(){

open('about:blank', '_self').close(); //一度再表示してからClose

}

</script>

closeは、自分のjavascriptで開いたwindowのみ警告(確認ダイアログ)が表示されません。

そのため、一度openさせてcloseさせています。

②javascriptで自window(親)からサブwindow(子)を閉じる場合

<script type="text/javascript">

// 親windowから子windowを閉じる

var winObj; //子windowオブジェクト

// 子window OPEN
function winOpen(){
  winObj = window.open('sample2_1.html', 'sample2');
  window.focus();
  winObj.focus();
}

// 子window CLOSE
function winClose(){
  if( (winObj) && (!winObj.closed) ){   //子windowが開かれているか？
    winObj.close();                     //子windowを閉じる
  }
  else{
    alert('子windowは開かれていません');
  }
  winObj = null;
}

</script>

// 親windowから子windowを閉じる

var winObj; //子windowオブジェクト

// 子window OPEN

function winOpen(){

winObj = window.open('sample2_1.html', 'sample2');

window.focus();

winObj.focus();

}

// 子window CLOSE

function winClose(){

if( (winObj) && (!winObj.closed) ){ //子windowが開かれているか？

winObj.close(); //子windowを閉じる

}

else{

alert('子windowは開かれていません');

}

winObj = null;

}

</script>

自window(親)からサブwindow(子)を開いて、その後閉じる例です。

③javascriptで自window(親)から親子関係の無いサブwindowを閉じる場合

<script type="text/javascript">

// 親windowからサブwindowを閉じる

// サブwindow OPEN
function winOpen(){
  var winObj = window.open('sample2_1.html', 'sample2');
  window.focus();
  winObj.focus();
}

// サブwindow CLOSE
function winClose(){
  var winObj = window.open('', 'sample2');        //サブwindowを空画面で上書き
  winObj.close();                                 //開いた空画面を閉じる
}

</script>

// 親windowからサブwindowを閉じる

// サブwindow OPEN

function winOpen(){

var winObj = window.open('sample2_1.html', 'sample2');

window.focus();

winObj.focus();

}

// サブwindow CLOSE

function winClose(){

var winObj = window.open('', 'sample2'); //サブwindowを空画面で上書き

winObj.close(); //開いた空画面を閉じる

}

</script>

サブwindow名を指定して閉じる例です。

逆に、サブwindow名が分からない場合は、今回の例は使用できません。

④javascriptでサブwindow(子)から親windowを閉じる場合

<script type="text/javascript">

// サブwindow(子)から親windowを閉じる

// サブwindow CLOSE
function winClose(){
  if( (window.opener) && (!window.opener.closed) ){   //親windowが開かれているか？                                                        
    var winObj = window.opener.open(window.opener.location,'_self');//親windowを再表示
    winObj.close();                                   //再表示した親windowを閉じる
  }else{
    alert('親windowは閉じられています');
  }
}

</script>

// サブwindow(子)から親windowを閉じる

// サブwindow CLOSE

function winClose(){

if( (window.opener) && (!window.opener.closed) ){ //親windowが開かれているか？

var winObj = window.opener.open(window.opener.location,'_self');//親windowを再表示

winObj.close(); //再表示した親windowを閉じる

}else{

alert('親windowは閉じられています');

}

</script>

サブwindow(子)から親windowを再表示して閉じる例です。

⑤javascriptで自window(親)が閉じた時、サブwindow(子)も閉じる場合

<script type="text/javascript">

// 親windowが閉じたらサブwindow(子)も閉じる

// アンロード時、サブwindow CLOSE
window.onunload = function() {
  if( (subWinObj) && (!subWinObj.closed) ){   //サブwindowが開かれているか？
    subWinObj.close();                         //サブwindowを閉じる
  }
}
}

</script>

// 親windowが閉じたらサブwindow(子)も閉じる

// アンロード時、サブwindow CLOSE

window.onunload = function() {

if( (subWinObj) && (!subWinObj.closed) ){ //サブwindowが開かれているか？

subWinObj.close(); //サブwindowを閉じる

}

</script>

親windowと同時に子windowも閉じる例です。

⑥javascriptで自window(親)が閉じた時、親子関係が無いサブwindowを閉じる場合

<script type="text/javascript">

// 親windowが閉じたらサブwindowも閉じる

// アンロード時、サブwindow CLOSE
window.onunload = function() {
  var winObj = window.open('', 'sample2');        //サブwindowを空画面で上書き
  winObj.close();                                 //開いた空画面を閉じる
}

</script>

// 親windowが閉じたらサブwindowも閉じる

// アンロード時、サブwindow CLOSE

window.onunload = function() {

var winObj = window.open('', 'sample2'); //サブwindowを空画面で上書き

winObj.close(); //開いた空画面を閉じる

}

</script>

サブwindow名を指定して閉じる例です。

逆に、サブwindow名が分からない場合は、今回の例は使用できません。

以上、javascriptでwindowを閉じる例6つでした。

まとめ

いかがでしたか？今回はjavascriptでwindowを閉じる処理について、例を用いて解説しました。

これでjavascriptでwindowを閉じる処理について解決することができます。

ぜひ、参考にしてみてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。