【JavaScript】closeメソッドでウィンドウを閉じる方法を解説

・JavaScripでウィンドウを閉じる方法を知りたい。
・closeメソッドを使ったけど、ウィンドウが閉じられない･･･。
・どうやってcloseメソッドを使えばいいの？

JavaScriptでは、closeメソッドを使ってウィンドウを閉じることができますが、いまいち上手に実装できない人も多いでしょう。

そこでこの記事では、JavaScriptでcloseメソッドを使ってウィンドウを閉じる方法について解説していきます。

この記事を読めば、closeメソッドやopenメソッドの使い方がわかり、正しくウィンドウを開閉できるようになるでしょう。

JavaScriptでウィンドウの閉じ方がわからない、closeメソッドを上手く使うことができない人は、ぜひ最後までご覧ください。

目次 [非表示]

1 JavaScriptでウィンドウを閉じる方法
- 1.1 window.closeを使ってウィンドウを閉じる
- 1.2 window.openを利用してウィンドウを閉じる
2 closeメソッドはopenメソッドで開いたウィンドウのみ閉じることができる
3 まとめ

JavaScriptでウィンドウを閉じる方法

JavaScriptでは、Webページに表示されるタブやウィンドウを開いたり閉じたりすることができます。

しかし、JavaScriptを学んでいる人の中で、上手く実装できない人も多いです。

なのでここでは、JavaScriptでウィンドウを閉じる方法について解説していきます。

window.closeを使ってウィンドウを閉じる

JavaScriptでウィンドウを閉じるには、「window.close()」というメソッドを使って実装することができます。

実際の書き方は次の通りです。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <input type="button" onclick="window.close();" value="閉じる">

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

</body>

</html>

inputタグにonclickで「window.close();」と指定します。

これは、inputをクリックしたときに、ウィンドウを閉じる挙動を表しています。

しかし、Chromeで結果を表示してボタンをクリックすると、ウィンドウは閉じられません。

デベロッパーツールで確認すると、上記のように「Scripts may close only the windows that were opened by them.」と注意書きが出ていました。

これは、「スクリプトはそれらによって開かれたウィンドウだけを閉じることができます。」という意味です。

つまり、window.closeでウィンドウを閉じることができるのは、JavaScriptで開いたウィンドウのみということになります。

MEMO

window.closeメソッドでウィンドウを閉じることは、ブラウザのセキュリティ上禁止されていることが多いので、動かない場合があります。

window.openを利用してウィンドウを閉じる

window.closeメソッドでウィンドウを閉じられない場合は、「window.open()」というメソッドを利用してウィンドウを閉じる方法もあります。

実際の書き方は次の通りです。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <input type="button" onclick="window.open('', '_self').close();" value="閉じる">

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

</body>

</html>

先ほどと同じように、inputタグでtypeをbuttonとします。

そして、onclickを今回は「window.open(”, ‘_self’).close();」と記述します。

これは、空のページを同じリンク元に開いて閉じるという挙動になります。

結果を表示してみると、次の通り。

新しいウィンドウは開かれず、デベロッパーツールで確認すると、「Scripts may close only the windows that were opened by them.」と出ました。

これは先ほどと同じように、スクリプトによって開かれたウィンドウしか閉じれませんよ、という警告です。

一部ブラウザによっては、このようにwindow.openを利用してもウィンドウを閉じることができない場合があります。

MEMO

firefoxやChromeでは空のページが残ってしまい、window.closeでは閉じることができないと考えられます。

では、一体どうやってcloseメソッドでウィンドウを閉じることができるのでしょうか。

その解決策をこれから解説していくので、見ていきましょう。

closeメソッドはopenメソッドで開いたウィンドウのみ閉じることができる

ここまでで、closeメソッドはopenメソッドで開いたウィンドウのみ閉じることができるとわかりました。

では、実際にどうやってcloseメソッドを使ってウィンドウを閉じることができるのか。

具体的な書き方は、次のようになります。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <input type="button" id="openBtn" value="開く">
    <input type="button" id="closeBtn" value="閉じる">

    <script>
      let newWindow; // 変数newWindowを宣言

      let openBtn = document.getElementById('openBtn'); // 開くボタンのidを取得

      openBtn.addEventListener('click', () => { // 開くボタンをクリックしたときのイベント
        newWindow = open('https://google.com'); // Googleのページを開く
      });

      let closeBtn = document.getElementById('closeBtn'); // 閉じるボタンのidを取得

      closeBtn.addEventListener('click', () => { //閉じるボタンをクリックしたときのイベント
        newWindow.close(); // openメソッドで開いたGoogleのページを閉じる
      });
    </script>
  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

let newWindow; // 変数newWindowを宣言

let openBtn = document.getElementById('openBtn'); // 開くボタンのidを取得

openBtn.addEventListener('click', () => { // 開くボタンをクリックしたときのイベント

newWindow = open('https://google.com'); // Googleのページを開く

});

let closeBtn = document.getElementById('closeBtn'); // 閉じるボタンのidを取得

closeBtn.addEventListener('click', () => { //閉じるボタンをクリックしたときのイベント

newWindow.close(); // openメソッドで開いたGoogleのページを閉じる

});

</script>

</body>

</html>

※今回は、開くボタンと閉じるボタンを用意して、ウィンドウを開閉させます。

まず、HTMLではinputタグを使って、開くボタンと閉じるボタンを作成しましょう。

開くボタンにはid属性を「openBtn」、閉じるボタンにはid属性を「closeBtn」と指定します。

そして、次にJavaScriptの実装をしていきます。

let newWindow; // 変数newWindowを宣言

1	let newWindow; // 変数newWindowを宣言

最初に「newWindow」という変数を宣言しておきます。（後でウィンドウを開閉する際に使います）

let openBtn = document.getElementById('openBtn'); // 開くボタンのidを取得

openBtn.addEventListener('click', () => { // 開くボタンをクリックしたときのイベント
  newWindow = open('https://google.com'); // Googleのページを開く
});

let openBtn = document.getElementById('openBtn'); // 開くボタンのidを取得

openBtn.addEventListener('click', () => { // 開くボタンをクリックしたときのイベント

newWindow = open('https://google.com'); // Googleのページを開く

});

そして、開くボタンのidを取得し、クリックイベントを作成します。

ここで、「newWindow」に「open()」メソッドを代入して、Googleのページが開くようにURLを指定します。

let closeBtn = document.getElementById('closeBtn'); // 閉じるボタンのidを取得

closeBtn.addEventListener('click', () => { //閉じるボタンをクリックしたときのイベント
  newWindow.close(); // openメソッドで開いたGoogleのページを閉じる
});

let closeBtn = document.getElementById('closeBtn'); // 閉じるボタンのidを取得

closeBtn.addEventListener('click', () => { //閉じるボタンをクリックしたときのイベント

newWindow.close(); // openメソッドで開いたGoogleのページを閉じる

});

閉じるボタンも同じように、idを取得してクリックイベントを作成します。

ウィンドウを閉じる場合は、先ほどの「newWindow」に「close()」メソッドを指定するだけです。

これでウィンドウを開閉できるボタンの実装ができました。

ブラウザで表示して、確認してみましょう。

開くボタンを押すと、Googleのページが開きました。

そして、閉じるボタンを押すと、Googleのページが閉じましたね。

このように、closeメソッドを使えば、開いたウィンドウを閉じることができます。

closeメソッドはopenメソッドで開いたウィンドウのみ閉じることができる、と覚えておきましょう。

まとめ

今回は、JavaScriptのcloseメソッドでウィンドウを閉じる方法について解説しました。

closeメソッドは、openメソッドでウィンドウを開いたときのみ閉じることができます。

window.closeメソッドだけだと、ブラウザによってはセキュリティの問題でウィンドウを閉じることができないので、注意が必要です。

正しい使い方がわかれば、JavaScriptでウィンドウを開閉することができるので、使い方を覚えておくといいでしょう。

この記事がJavaScriptの学習に役立つと幸いです。

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