【Javascript】window.closeでウィンドウを閉じる方法【コピペで動きます】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptでウィンドウを閉じるにはどうしたらいいの?
・window.close()メソッドを使ってもウィンドウが閉じられない…

というお悩みを解決する記事になっています。


この記事の内容

・window.close()メソッドを使ってウィンドウを閉じる実装例【コピペでOK】
・window.close()メソッドを使用する際の注意事項


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

window.close()メソッドの基本的な使い方

Javascriptを使ってウィンドウを閉じるには、window.close()メソッドを使用します。

使い方はとても簡単で、閉じたいウィンドウをclose()メソッドのレシーバに指定するだけで大丈夫です。

window.close()メソッドの使い方

window.close()
// この「window」部分に閉じたいウィンドウを指定します。

window.close()メソッドの実装例【コピペでOK】

続いては、window.close()の実装例をご紹介していきます。

ここでは、一度ウィンドウを開いて、3秒後にそのウィンドウを閉じる動きを実装していきます。

実装コード

<p>以下のボタンを押すと新規ウィンドウでこのブログが開きます</p>

<button onClick="openNewWindow()">新規ウィンドウを開く</button>

<script>
function openNewWindow() {
  const $window = window.open(https://hataworakuni.net/, null, 'top=100, left=500, width=1000, height=800')
  setTimeout(() => $window.close(), 3000)
}
</script>

上記のコードでは以下のことを実施しています。


  1. 「新規ウィンドウを開く」ボタンを押してopenNewWindow()メソッドを動かす
  2. window.open()メソッドを使って、サブウィンドウを開き、それをそのまま$windowという変数に代入
  3. setTimeout()関数を使って、3秒後にサブウィンドウ($window)を閉じる

実際に以下のボタンで動作確認をしてみてください。

動作確認用

以下のボタンを押すと新規ウィンドウでこのブログが開きます


傍楽たろう
なお、逆にウィンドウを開く方法については、以下の記事にて詳しく解説していますので、こちらもぜひご確認くださいね。

おすすめ記事

今回の記事は、 特定の動作の後に違うURLへ遷移させたいJavascriptを使って新規タブでリンクを開きたいJavascriptを使って新規ウィンドウでリンクを開きたい というお悩みをお持ちの方に向けた記事になっています。 […]

Javascriptでリンク(URL)を開く方法

window.close()メソッドを使用する際の注意点

このwindow.close()メソッドですが、とても簡単である反面、使用する際には1点注意が必要です

それは、「window.open() メソッドによって開かれたウィンドウしか閉じることができない」ということです。

もしそのウィンドウがwindow.open() メソッドによって開かれたものでない場合、「スクリプトによって開かれたウィンドウ以外を閉じることができません」というエラー文がコンソール画面に表示されます。

そのため、現在開かれているウィンドウを閉じるためには、以下のように実装するようにしましょう。

<p>以下のボタンを押すとウィンドウが閉じられます</p>

<button onClick="closeWindow()">ウィンドウを閉じる</button>

<script>
function closeWindow() {
  window.open('about:_blank', '_self').close()
}
</script>

上記の理屈としては、「一度自分自身を空のウィンドウとして開きJavascriptが操作できるようにした上で、window.close()メソッドを使ってウィンドウを閉じる」という動きになります。

傍楽たろう
なお、上記のコードを実装してボタンを押すと実際にそのウィンドウが閉じられてしまいますので、くれぐれもご注意くださいね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、window.close()メソッドを使ってウィンドウを閉じる方法について解説してきましたがいかがでしたか?

実装自体は非常に簡単ですが、Javascriptを使って自分自身で開いたウィンドウしか閉じることはできないため、その点だけ注意しておきましょう!

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。