この記事で分かること
window.openerの役割と使い方- 親ウィンドウの情報を参照する方法
window.closedでウィンドウ状態を確認する方法window.nameの取得・設定方法- サブウィンドウと親ウィンドウの連携方法
window.opener、window.closed、window.name は、
ウィンドウ同士の関係を扱うためのプロパティです。
新しく開いたウィンドウ(サブウィンドウ)と、元のウィンドウ(親ウィンドウ)間で情報をやり取りする際に利用します。
window.opener とは?
window.opener は、現在のウィンドウを開いた「親ウィンドウ」を参照するプロパティです。
window.opener.location;
サブウィンドウから親ウィンドウの情報にアクセスしたいときに利用します。
使用例:親ウィンドウのURLを取得する
const parentLoc = window.opener.location;
→ 親ウィンドウのリンク先(location)が変数 parentLoc に代入されます。
window.closed とは?
window.closed は、指定したウィンドウが閉じているかどうかを判定するプロパティです。
true:閉じているfalse:閉じていない
ユーザーがサブウィンドウを閉じたかどうか確認したいときに便利です。
使用例:ウィンドウが閉じているか確認する
if (newWin.closed) {
alert("閉じています");
}
→ newWin が閉じていた場合にダイアログを表示します。
window.name とは?
window.name は、ウィンドウの名前を参照・設定するプロパティです。
const wName = newWin.name;
→ ウィンドウ newWin の名前が変数 wName に代入されます。
ウィンドウ名は window.open() の第2引数で指定した名前と一致します。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
window.openerやwindow.nameの仕組みを体系的に理解したい- ブラウザの動作(
Window/Document/Event)の基礎をしっかり学びたい - ネット記事だけだとウィンドウ間通信の理解が断片的に感じる
window.opener・window.closed・window.name は、
JavaScript のWindow オブジェクト・ブラウザの仕組みを理解すると一気に分かりやすくなります。
書籍ではこれらの基礎を順序立てて学べるため、親ウィンドウとサブウィンドウの連携を深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、Window / Document / Event の関係を視覚的に理解できる入門書です。
window.opener の前提となる「ブラウザの構造」や「ページ遷移の仕組み」を丁寧に学べます。
この本で解決できること:
Windowオブジェクトの基礎がしっかり理解できる- ウィンドウ間で情報をやり取りする仕組みが分かる
- 実際に動くサンプルで理解が深まる
確かな力が身につく JavaScript「超」入門
Windowオブジェクト・ブラウザAPI・イベント処理など、
window.opener や window.closed の理解に必要な基礎を深く学びたい方に最適な入門書です。
実務レベルのコード設計にも役立ちます。
この本で解決できること:
- ウィンドウ間通信の背景にある仕組みを体系的に学べる
- ブラウザのセキュリティ仕様を踏まえた実装が理解できる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ(Udemy講座)
window.opener や window.closed は、
「ブラウザがどのようにウィンドウを管理しているか」を視覚的に理解すると一気に腑に落ちます。
動画で実際の挙動を見ながら学ぶことで、Window オブジェクトの仕組みが直感的に理解できます。
初心者のためのJavaScript 完全入門
Window / Document / Event の基礎を体系的に学べる人気講座です。
window.opener の前提となる「ブラウザの構造」や「ページ遷移の仕組み」をしっかり理解できます。
この講座で解決できること:
Windowオブジェクトの役割が視覚的に理解できる- ウィンドウ間でのデータ連携の流れが分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門(Udemy)
超JavaScript 完全ガイド 2026
ウィンドウ操作・ブラウザAPI・イベント処理など、
window.opener や window.closed を実務で使いこなしたい方に最適な講座です。
この講座で解決できること:
Windowオブジェクトの実践的な使い方が身につく- ブラウザAPIの理解が深まり、応用が効く
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ(スクールという選択肢)
独学の限界を感じやすいポイント
Window/Document/Eventの関係が曖昧なままになるwindow.openerやwindow.closedの挙動が理解しにくい- ブラウザのセキュリティ仕様で混乱しやすい
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
ウィンドウ間通信やブラウザAPIのような実務的なテーマも丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- WindowオブジェクトやブラウザAPIの理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
window.opener / closed / name に関するよくある質問(FAQ)
window.opener が null になるのはなぜ?
親ウィンドウから window.open で開かれていない場合、window.opener は null になります。
window.closed が常に false になるのは?
変数に保持していないウィンドウや、別タブで開いたページには closed を正しく判定できません。
window.name は何に使うの?
ウィンドウを識別したり、window.open の再利用を制御するために使われます。
親ウィンドウとサブウィンドウでデータをやり取りできますか?
可能です。window.opener を使えば、親ウィンドウの変数や関数にアクセスできます。
3つのプロパティの関係まとめ
opener:自分を開いた親ウィンドウを参照closed:ウィンドウが閉じているかどうかを判定name:ウィンドウ名の取得・設定
これらを組み合わせることで、
親ウィンドウとサブウィンドウ間の連携がスムーズに行えます。