JavaScriptでブラウザを閉じる方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでブラウザを閉じる方法について現役エンジニアが解説しています。ブラウザを閉じるにはwindows.closeメソッドを使用します。ブラウザによってはwindow.openで開いたページでないと閉じることが出来ないので注意しましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
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で閉じることはできないと考えてください。
実際に書いてみよう
それでは実際に書いてみましょう。
以下の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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
