現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ウィンドウ

【JavaScript入門】window.closeの使い方|ウィンドウを閉じる方法と注意点を初心者向けに解説

投稿日:2019年5月7日 更新日:

JavaScriptのwindow.closeとは?ウィンドウを閉じる方法と注意点を初心者向けに解説

window.close() は、指定したウィンドウ、または自分自身のウィンドウを閉じるためのメソッドです。
ポップアップウィンドウを閉じる処理などで利用されます。



window.closeとは?

window.close() は、Window オブジェクトに対して使用する「ウィンドウを閉じる」メソッドです。

ウィンドウ.close();
  • ウィンドウ名を指定した場合:そのウィンドウを閉じる
  • 省略した場合:自分自身のウィンドウを閉じる

ただし、ブラウザのセキュリティ仕様により、
JavaScript で閉じられるのは「JavaScriptで開いたウィンドウ」だけ という点に注意が必要です。



使用例

例:新しく開いたウィンドウを閉じる

let newWin = window.open(“sub.html”, “sub”);
newWin.close();

newWin という名前で開いたウィンドウを閉じます。

例:自分自身のウィンドウを閉じる

window.close();

→ 現在のウィンドウを閉じます(ただし、JavaScriptで開いたウィンドウに限る)。

window.closeが動作しない場合

以下のような場合、window.close() は動作しません。

  • ユーザーが直接開いたタブ・ウィンドウを閉じようとした場合
  • ブラウザの設定でスクリプトによるウィンドウ操作が制限されている場合

これはブラウザのセキュリティ仕様によるもので、
ユーザーの意図しないウィンドウ操作を防ぐための仕組みです。



まとめ

  • window.close() はウィンドウを閉じるメソッド
  • ウィンドウ名を指定すればそのウィンドウを閉じられる
  • 省略すると自分自身のウィンドウを閉じる
  • JavaScriptで開いたウィンドウしか閉じられない点に注意

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-ウィンドウ
-

執筆者:

関連記事

【JavaScript入門】window.resizeTo・resizeByの使い方|ウィンドウサイズを絶対・相対で変更する方法を解説

JavaScriptのwindow.resizeTo・resizeByとは?ウィンドウサイズを変更する方法を初心者向けに解説 window.resizeTo() と window.resizeBy() …

【JavaScript入門】innerWidth・innerHeight・outerWidth・outerHeightの使い方|ウィンドウサイズの取得・設定方法を解説

JavaScriptのinnerWidth・innerHeight・outerWidth・outerHeightとは?ウィンドウサイズの取得・設定方法を解説 innerWidth・innerHeigh …

【JavaScript入門】window.opener・closed・nameの使い方|親ウィンドウ参照とウィンドウ状態の確認方法を解説

JavaScriptのwindow.opener・closed・nameとは?親ウィンドウの参照やウィンドウ状態の確認方法を解説 window.opener、window.closed、window. …

【JavaScript入門】status・defaultStatusとは?ステータスバーの文字列を設定する方法と注意点を解説

JavaScriptのstatus・defaultStatusとは?ステータスバーの文字列を参照・設定する方法を解説 window.status と window.defaultStatus は、ブラ …

【JavaScript入門】back・forward・home・print・stop・findの使い方|ブラウザ操作メソッドをわかりやすく解説

JavaScriptのback・forward・home・print・stop・findとは?ブラウザ操作メソッドを初心者向けに解説 JavaScript には、ブラウザの「戻る」「進む」「印刷」など …