JavaScriptでブラウザを閉じる方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでブラウザを閉じる方法について現役エンジニアが解説しています。ブラウザを閉じるにはwindows.closeメソッドを使用します。ブラウザによってはwindow.openで開いたページでないと閉じることが出来ないので注意しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでブラウザを閉じる方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでブラウザを閉じる方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

window.closeメソッドで閉じる方法

window.closeメソッドは、WebページをJavaScriptで閉じるために用意されているメソッドです。このメソッドが呼ばれると、現在開かれているウィンドウが閉じられます。以下のようにコードを書きます。

window.close()

このメソッドには制限があり、原則としてwindow.openで開かれたWebページしか閉じることができません。そのためブラウザによってはopenで開かれていないページを閉じることができません。そうすると以下のような警告がでます。

 

Scripts may close only the windows that were opened by it.

 

その他の方法で閉じる方法

window.close以外を使用して、Webページを閉じることも可能です。それはwindow.openを使用する方法です。一度window.openで空のタブを開き、その上でcloseを呼び出すことでwindowを閉じることができます。

 

window.open('about:blank','_self').close()

このメソッドの挙動はブラウザによって違います。firefoxやchromeの場合は、空のページが残ってしまうためwindow.openで開いていないページをwindow.closeで閉じることはできないと考えてください。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。

以下のHTMLにGoogleのトップページを開くボタンと、閉じるボタンを用意してみます。

<!DOCTYPE html>
 <html lang='ja'>
 <head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>sample</title>
 </head>
 <body>
  <button onClick="openWindow()">open</button>
  <button onClick="closeWindow()">close</button>
 </body>
 </html>
以下のjavascriptを書いて、ボタンをクリックした時にwindowを開く・閉じる機能を実装します。

<script>
 let win
 const openWindow = () => {
  win = window.open("https://google.com")
 }

 const closeWindow = () => {
  win.close()
 }
</script>

コーディングできたら、open=>closeの順番で押してみましょう。
Googleのトップを開く・閉じるができれば成功です。

以上で解説を終わります。

筆者プロフィール

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。