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

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

ウィンドウ

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

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

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

window.openerwindow.closedwindow.name は、
ウィンドウ同士の関係を扱うためのプロパティです。
新しく開いたウィンドウ(サブウィンドウ)と、元のウィンドウ(親ウィンドウ)間で情報をやり取りする際に利用します。



window.openerとは?

window.opener は、現在のウィンドウを開いた「親ウィンドウ」を参照するプロパティです。

window.opener.location;

サブウィンドウから親ウィンドウの情報にアクセスしたいときに利用します。

使用例:親ウィンドウのURLを取得する

let parentLoc = window.opener.location;

→ 親ウィンドウのリンク先(location)が変数 parentLoc に代入されます。



window.closedとは?

window.closed は、指定したウィンドウが閉じているかどうかを判定するプロパティです。

  • true:閉じている
  • false:閉じていない

ユーザーがサブウィンドウを閉じたかどうか確認したいときに便利です。

使用例:ウィンドウが閉じているか確認する

if (newWin.closed) {
    alert(“閉じています”);
}

newWin が閉じていた場合にダイアログを表示します。

window.nameとは?

window.name は、ウィンドウの名前を参照・設定するプロパティです。

let wName = newWin.name;

→ ウィンドウ newWin の名前が変数 wName に代入されます。

ウィンドウ名は window.open() の第2引数で指定した名前と一致します。



3つのプロパティの関係まとめ

  • opener:自分を開いた親ウィンドウを参照
  • closed:ウィンドウが閉じているかどうかを判定
  • name:ウィンドウ名の取得・設定

これらを組み合わせることで、
親ウィンドウとサブウィンドウ間の連携がスムーズに行えます。

関連リンク

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

-ウィンドウ
-

執筆者:

関連記事

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

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

【JavaScript入門】window.scrollの使い方|指定位置へスクロールする方法を初心者向けに解説

JavaScriptのwindow.scrollとは?指定位置へスクロールする方法を初心者向けに解説 window.scroll() は、ページを指定した座標位置までスクロールさせるためのメソッドです …

【JavaScript入門】window.moveTo・moveByの使い方|ウィンドウ位置を絶対・相対で移動する方法を解説

JavaScriptのwindow.moveTo・moveByとは?ウィンドウ位置を移動する方法を初心者向けに解説 window.moveTo() と window.moveBy() は、ブラウザウィ …

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

JavaScriptのwindow.closeとは?ウィンドウを閉じる方法と注意点を初心者向けに解説 window.close() は、指定したウィンドウ、または自分自身のウィンドウを閉じるためのメソ …

【JavaScript入門】window.openの使い方|新しいウィンドウやタブを開く方法とオプション設定を解説

JavaScriptのwindow.openとは?新しいウィンドウ(タブ)を開く方法とオプション設定を解説 window.open() は、新しいウィンドウ(またはタブ)を開くためのメソッドです。 表 …