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サイトの表現の幅を広げたいという方はぜひご覧ください。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
