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

みなさんこんにちは!

今回の記事は、

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

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


この記事の内容

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


Javascriptを使ってウィンドウ(window)を閉じる方法

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

使用機会はあまり多くはないと思いますが、以下のような動きを実装するためにはwindow.close()メソッドを使用する必要が出てきます。

  • 1. ボタンクリックのイベントでサブウィンドウを表示する
  • 2. サブウィンドウで確認事項を表示
  • 3. 「確認しました」ボタンを押してサブウィンドウを閉じる

使い方はとても簡単で、閉じたいウィンドウを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()メソッドを使ってウィンドウを閉じる」という動きになります。

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

最後に

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

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

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト