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

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

ウィンドウ

【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引数で指定した名前と一致します。

JavaScript 初心者におすすめの学習書籍

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→ いちばんやさしい JavaScript の教本

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門



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

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

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

関連記事

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

2019/05/11   -ウィンドウ
 

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

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

2019/05/10   -ウィンドウ
 

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

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

2019/05/12   -ウィンドウ
 

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

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

2019/05/13   -ウィンドウ
 

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

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

2019/05/06   -ウィンドウ
 

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

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

-ウィンドウ
-

執筆者: