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

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

Frame(フレーム・親子ウィンドウ)

【JavaScript入門】frame.locationの使い方|フレームのURL(URI)を参照する方法をわかりやすく解説

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

この記事で分かること

  • frame.location の基本的な役割
  • フレームが表示しているURL(URI)の取得方法
  • frames 配列との組み合わせ方
  • 親フレーム・トップフレームからの参照方法
  • HTML5 以降の注意点(非推奨・同一オリジン制限)

frame.location は、特定のフレームが現在表示しているページ(URL / URI)を参照するためのプロパティです。
フレーム構造を持つページで、別フレームのURLを取得したいときに利用されます。



location プロパティとは?

location は、フレーム(またはウィンドウ)が表示しているページのURLを参照するプロパティです。
フレーム名または frames[番号] を使ってアクセスできます。

フレーム.location;

使用例:3番目のフレームの名前を取得

let n = parent.frames[2].name;

→ 親フレーム内の 3 番目のフレーム名を変数 n に代入します。



使用例:特定フレームのURLを取得する

フレーム名を使って、そのフレームが表示しているページのURLを取得できます。

alert("メニューフレームのURIは " + parent.menu.location + " です。");

menu という名前のフレームのURLをダイアログに表示します。

frames[] と組み合わせて使う

フレームは frames 配列に格納されているため、番号で参照することもできます。

let url = top.frames[0].location;

→ 最上位フレーム内の 1 番目のフレームのURLを取得します。

注意点

  • frameset(フレーム)は HTML5 では非推奨
  • モダンWebでは iframe の使用が一般的
  • 異なるドメインのフレームには同一オリジン制限でアクセス不可

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

書籍で学ぶのが向いている人

  • frame.location の仕組みを体系的に理解したい
  • ウィンドウ・フレーム構造や URL の扱いを基礎から学びたい
  • ネット記事だけだと情報が断片的に感じる

frame.location は、フレームが表示しているページの URL を参照するためのプロパティです。
書籍では、これらの前提となるDOM・ウィンドウオブジェクト・フレーム階層を体系的に学べるため、
本記事の内容がより深く理解できます。

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

図解が多く、ウィンドウや DOM の構造を視覚的に理解できる入門書です。
frame.location のような URL 参照の仕組みを学ぶ際にも、
「JavaScript がどのようにページ全体を扱うのか」という基礎がしっかり身につきます。

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

  • ウィンドウ・DOM の基本構造を理解できる
  • フレームや URL 参照の前提知識が身につく
  • 実際に動くサンプルで理解が深まる

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

JavaScript のウィンドウオブジェクトや URL の扱いをより深く理解したい方に向いている入門書です。
frame.location がどのように URL を参照しているのか、
その仕組みを体系的に学べます。

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

  • URL・location オブジェクトの理解が深まる
  • フレーム階層と URL 参照の関係が明確になる
  • 現代的な JavaScript の書き方もまとめて習得できる

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

frame.location のような
「フレームがどの URL を表示しているか」を扱う概念は、
ウィンドウ構造や DOM の動きを視覚的に理解すると一気に腑に落ちます。
動画ではページ遷移や URL の変化がそのまま見えるため、理解がスムーズです。

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

DOM・ウィンドウ・location オブジェクトなど、
frame.location を理解する前提となる基礎がしっかり学べる講座です。
ページの URL を扱う JavaScript の基本が丁寧に解説されています。

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

  • location オブジェクトの動きを視覚的に理解できる
  • フレームや URL 参照の仕組みが分かる
  • 初心者がつまずきやすいポイントを丁寧に解説

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

超JavaScript 完全ガイド 2026

URL 操作・location オブジェクト・ウィンドウ階層など、
frame.location の理解をさらに深めたい方に最適な講座です。
実務で役立つページ遷移や URL 制御の知識も身につきます。

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

  • location / URL 操作の応用的な使い方を理解できる
  • フレーム階層と URL の関係を深く学べる
  • 現代的な JavaScript の書き方をまとめて習得

超JavaScript 完全ガイド 2026(Udemy)

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

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

  • frame.location の役割が曖昧なままになる
  • URL・location オブジェクトの仕組みが理解しづらい
  • ウィンドウ階層やフレーム構造の理解が進まない
  • 学習の順番に自信が持てない

スクールでは、プロの講師が学習ロードマップを作成し、
URL 操作・location オブジェクト・ウィンドウ構造なども丁寧にサポートしてくれます。

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

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

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

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



frame.location に関するよくある質問(FAQ)

Q1

frame.location は何を参照しますか?

A

そのフレームが現在表示しているページ(URL / URI)を参照します。

Q2

フレーム名と frames[番号] のどちらで参照すべきですか?

A

可読性を重視するなら名前、位置で管理するなら番号が便利です。

Q3

異なるドメインのフレームのURLは取得できますか?

A

同一オリジン制限により取得できません。アクセスするとエラーになります。

Q4

HTML5 ではフレームを使うべきですか?

A

frameset は非推奨のため、実務では iframe を使用します。



まとめ

  • frame.location はフレームが表示しているURLを参照するプロパティ
  • フレーム名または frames[番号] でアクセス可能
  • 親フレーム・トップフレームと組み合わせて柔軟に参照できる
  • HTML5 では非推奨のため、実務では iframe が一般的



関連記事

【JavaScript入門】iframeとframesetの違いを解説|歴史・仕様・現代の使い方を初心者向けにわかりやすく紹介

この記事で分かること iframe と frameset の歴史と役割の違い frameset が廃止された理由 iframe が現代Webで主流になった背景 同一オリジン制限や実務での注意点 HTM …

【JavaScript入門】frame.nameの使い方|フレーム名を取得する方法をわかりやすく解説

この記事で分かること frame.name の基本的な役割 フレーム名(name 属性)の取得方法 frames 配列との組み合わせ方 フレーム名を使うメリット HTML5 以降の注意点(非推奨・同一 …

【JavaScript入門】Frameオブジェクトとframes配列の使い方|フレーム参照・frames.lengthをわかりやすく解説

この記事で分かること Frame オブジェクトの基本 frames 配列でのフレーム参照方法 frames.length による総数取得 DOM(getElementById)でのフレーム参照 フレー …

【JavaScript入門】parent・top・selfの使い方|フレーム階層の参照方法をわかりやすく解説

この記事で分かること parent・top・self の基本的な役割 フレーム階層の参照方法 親フレーム・最上位フレーム・自分自身のフレームの違い 実際の使用例(フレーム間操作) HTML5 以降の注 …

【JavaScript入門】postMessageの使い方|iframe・別ウィンドウ間で安全にデータを送受信する方法を初心者向けに解説

この記事で分かること postMessage を使ったフレーム間通信の基本 iframe・別ウィンドウ・親子ウィンドウ間でのデータ送受信 origin チェックによるセキュリティ対策 実務での利用例と …

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

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

-Frame(フレーム・親子ウィンドウ)

執筆者: