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

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

ウィンドウ

【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:ウィンドウ名の取得・設定

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

関連リンク

-ウィンドウ
-

執筆者:

関連記事

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

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

【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 には、ブラウザの「戻る」「進む」「印刷」など …

【JavaScript入門】pageXOffset・pageYOffsetとは?現在のスクロール位置を取得・設定する方法を解説

JavaScriptのpageXOffset・pageYOffsetとは?現在のスクロール位置を取得・設定する方法を解説 pageXOffset と pageYOffset は、ページがどれだけスクロ …

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

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