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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ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では、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。