【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でタブやウィンドウを操作する方法を解説しました。

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

「プログラミング、右も左もわからない…」という方にオススメ

cta_under_bnr

当プログラミングスクール「侍エンジニア」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニアは上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

詳細はこちら

書いた人

ワカツキ ヒロアキ

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

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー