【JavaScript入門】WindowをCloseする方法を解説!

こんにちは!エンジニアのワカツキです!

今回は、window.closeメソッドなどを使って、ブラウザのウィンドウを閉じる方法を解説します!

  • window.closeの使い方
  • その他のウィンドウの閉じ方
  • window.openの使い方
などについて解説していきます。

window.closeとは

window.closeメソッドは、WEBページをJavaScriptで閉じるために用意されたメソッドです。一般のブラウザの場合は、タブが閉じられます。

「ボタンクリック→子画面表示→項目を入力してから画面を閉じる」といった操作の、閉じるボタンを作るときなどに使います。

それでは、実際に動かしてみましょう!

window.closeの使い方

それでは、実際にwindow.closeメソッドの使い方を解説していきます。

window.closeを使って画面を閉じる方法

ボタンをクリックしたときに画面を閉じるサンプルを用意しました。

<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>

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

</body>
</html>

onclick処理の中に、「window.close();」を書くことでボタンクリック時に画面を閉じることができます。

ただし、ブラウザのセキュリティ上禁止されていることが多いため、このメソッドは実際に動かないことがあります。そんな時は以下の方法を試してみてください。

window.openを応用してWEBページを閉じる

window.openは本来、新しいページ(ブラウザでいう新しいタブ)を開くためのメソッドですが、このメソッドを利用して、window.closeに対応していないブラウザでもタブを閉じることができます

<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>

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

</body>
</html>

裏技的な方法ですが、これでwindow.close()に対応していない多くのブラウザで動くはずです。window.closeが使えない場合は、こちらを使いましょう!

また、windows.openについては以下記事で詳しく解説しているので、気になる方は見てみてくださいね!

【JavaScript入門】window.open()で新規タブやウィンドウを開く方法!
更新日 : 2019年4月25日

windowを閉じる/開く際の注意点

  • Firefoxなどの一部ブラウザではタブが閉じませんので、注意しましょう
  • windowを開く際のwindow.openのオプションは、実行時の挙動がブラウザによって異なるので、必ずどのような結果になるか、確認しておきましょう

まとめ

いかがだったでしょうか!

今回の記事では、window.closeメソッドなどを使って、JavaScriptでタブやウィンドウを操作する方法を解説しました。

作業が完了した画面でユーザーがタブを閉じる手間を省いたり、新しいウィンドウでわかりやすく表示したり、色々なことに活用できますので、覚えておきましょう!

\業界最安級/
月額2,980円のプログラミングスクール

✔ 業界最安値の月定額2,980円
✔ 「Q&A掲示板」で平均30分以内に回答がもらえる
✔ 月に一度の「オンライン相談」で悩みを解決
✔ 教材の数は30種類以上
✔ 入会金不要+いつでも退会OK

公式サイトはこちら

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close