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

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

Window(ウィンドウ操作)

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

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

この記事で分かること

  • window.opener の役割と使い方
  • 親ウィンドウの情報を参照する方法
  • window.closed でウィンドウ状態を確認する方法
  • window.name の取得・設定方法
  • サブウィンドウと親ウィンドウの連携方法

window.openerwindow.closedwindow.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.openerwindow.name の仕組みを体系的に理解したい
  • ブラウザの動作(Window / Document / Event)の基礎をしっかり学びたい
  • ネット記事だけだとウィンドウ間通信の理解が断片的に感じる

window.openerwindow.closedwindow.name は、
JavaScript のWindow オブジェクト・ブラウザの仕組みを理解すると一気に分かりやすくなります。
書籍ではこれらの基礎を順序立てて学べるため、親ウィンドウとサブウィンドウの連携を深く理解できます。

いちばんやさしい JavaScript の教本

図解が多く、Window / Document / Event の関係を視覚的に理解できる入門書です。
window.opener の前提となる「ブラウザの構造」や「ページ遷移の仕組み」を丁寧に学べます。

この本で解決できること:

  • Window オブジェクトの基礎がしっかり理解できる
  • ウィンドウ間で情報をやり取りする仕組みが分かる
  • 実際に動くサンプルで理解が深まる

確かな力が身につく JavaScript「超」入門

Windowオブジェクト・ブラウザAPI・イベント処理など、
window.openerwindow.closed の理解に必要な基礎を深く学びたい方に最適な入門書です。
実務レベルのコード設計にも役立ちます。

この本で解決できること:

  • ウィンドウ間通信の背景にある仕組みを体系的に学べる
  • ブラウザのセキュリティ仕様を踏まえた実装が理解できる
  • 現代的な JavaScript の書き方が身につく

動画で理解を深めたい方へ(Udemy講座)

window.openerwindow.closed は、
「ブラウザがどのようにウィンドウを管理しているか」を視覚的に理解すると一気に腑に落ちます。
動画で実際の挙動を見ながら学ぶことで、Window オブジェクトの仕組みが直感的に理解できます。

初心者のためのJavaScript 完全入門

Window / Document / Event の基礎を体系的に学べる人気講座です。
window.opener の前提となる「ブラウザの構造」や「ページ遷移の仕組み」をしっかり理解できます。

この講座で解決できること:

  • Window オブジェクトの役割が視覚的に理解できる
  • ウィンドウ間でのデータ連携の流れが分かる
  • 初心者がつまずきやすいポイントを丁寧に解説

初心者のためのJavaScript 完全入門(Udemy)

超JavaScript 完全ガイド 2026

ウィンドウ操作・ブラウザAPI・イベント処理など、
window.openerwindow.closed を実務で使いこなしたい方に最適な講座です。

この講座で解決できること:

  • Window オブジェクトの実践的な使い方が身につく
  • ブラウザAPIの理解が深まり、応用が効く
  • 現代的な JavaScript の書き方をまとめて習得

超JavaScript 完全ガイド 2026(Udemy)

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • Window / Document / Event の関係が曖昧なままになる
  • window.openerwindow.closed の挙動が理解しにくい
  • ブラウザのセキュリティ仕様で混乱しやすい
  • 学習の順番に自信が持てない

スクールでは、プロの講師が学習ロードマップを作成し、
ウィンドウ間通信やブラウザAPIのような実務的なテーマも丁寧にサポートしてくれます。

無料相談で得られるメリット

  • あなたのレベルに合わせた学習計画を作成
  • WindowオブジェクトやブラウザAPIの理解を深めるアドバイスがもらえる
  • 効率的な学習方法をプロが提案
  • エンジニア転職を視野に入れたキャリア相談も可能

JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。

DMM WEBCAMP 学習コース(無料相談はこちら)



window.opener / closed / name に関するよくある質問(FAQ)

Q1

window.openernull になるのはなぜ?

A

親ウィンドウから window.open で開かれていない場合、window.openernull になります。

Q2

window.closed が常に false になるのは?

A

変数に保持していないウィンドウや、別タブで開いたページには closed を正しく判定できません。

Q3

window.name は何に使うの?

A

ウィンドウを識別したり、window.open の再利用を制御するために使われます。

Q4

親ウィンドウとサブウィンドウでデータをやり取りできますか?

A

可能です。window.opener を使えば、親ウィンドウの変数や関数にアクセスできます。



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

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

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



関連記事

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

この記事で分かること window.scrollTo() の基本的な使い方 X・Y座標を指定してスクロールする方法 scroll() との違い スムーズスクロールの書き方 動作サンプルを使ったスクロー …

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

この記事で分かること window.open() の基本構文 URL・ウィンドウ名・オプションの役割 ウィンドウ名を使った再利用の仕組み 利用できるオプション一覧と設定方法 実務で使える window …

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

この記事で分かること back()・forward() の履歴操作 home() の動作と注意点 print() で印刷ダイアログを開く方法 stop() で読み込みを中止する方法 find() でペ …

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

この記事で分かること window.status の役割と使い方 window.defaultStatus の仕組みと設定方法 ステータスバーが現在ほぼ無効化されている理由 歴史的仕様として知っておく …

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

この記事で分かること window.close() の基本的な使い方 指定したウィンドウを閉じる方法 自分自身のウィンドウを閉じる条件 window.close が動作しない理由 ブラウザのセキュリテ …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-Window(ウィンドウ操作)

執筆者: