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

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

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

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

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

この記事で分かること

  • frame.name の基本的な役割
  • フレーム名(name 属性)の取得方法
  • frames 配列との組み合わせ方
  • フレーム名を使うメリット
  • HTML5 以降の注意点(非推奨・同一オリジン制限)

frame.name は、特定のフレームに設定されている名前(name 属性)を参照するためのプロパティです。
フレーム構造を持つページで、別フレームを識別したいときに利用されます。



frame.name とは?

フレーム名は <frame> タグの name 属性または id 属性で指定されます。

<frame name="menu">

このフレームの名前を取得するには次のように書きます。

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

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



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

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

let frameName = top.frames[0].name;

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

フレーム名を使うメリット

  • 複数フレームを扱う際に識別しやすい
  • フレーム名を使って locationdocument を操作できる
  • frames[番号] よりも可読性が高い

注意点

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

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

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

  • frame.name の仕組みを体系的に理解したい
  • フレーム名・ウィンドウ階層の基礎をしっかり学びたい
  • ネット記事だけだと情報が断片的に感じる

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

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

図解が多く、ウィンドウや DOM の構造を視覚的に理解できる入門書です。
frame.name のような「フレームの識別」に関わる概念も、
JavaScript がページ全体をどう扱うかという基礎から理解できます。

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

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

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

JavaScript のウィンドウオブジェクトや DOM の仕組みをより深く理解したい方に向いている入門書です。
frame.name がどのようにフレームを識別しているのか、
その仕組みを体系的に学べます。

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

  • フレーム名・ウィンドウ階層の理解が深まる
  • フレーム操作の基礎が明確になる
  • 現代的な JavaScript の書き方もまとめて習得できる

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

frame.name のような
「フレームを識別する仕組み」は、ウィンドウ構造や DOM の動きを視覚的に理解すると一気に腑に落ちます。
動画ではフレーム構造やページの関係性がそのまま見えるため、理解がスムーズです。

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

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

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

  • DOM とウィンドウの関係を視覚的に理解できる
  • フレーム名の役割や参照方法が分かる
  • 初心者がつまずきやすいポイントを丁寧に解説

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

超JavaScript 完全ガイド 2026

ウィンドウオブジェクトや DOM の深い理解を目指す方に最適な講座です。
frame.name の仕組みをより高度に理解でき、
実務にも応用できます。

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

  • フレーム階層と識別の仕組みを応用的に学べる
  • フレーム名を使った操作の理解が深まる
  • 現代的な JavaScript の書き方をまとめて習得

超JavaScript 完全ガイド 2026(Udemy)

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

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

  • frame.name の役割が曖昧なままになる
  • フレーム構造やウィンドウ階層の理解が進まない
  • コードレビューを受ける機会がない
  • 学習の順番に自信が持てない

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

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

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

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

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



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

Q1

frame.name は何を返しますか?

A

そのフレームに設定されている name 属性の値を返します。

Q2

nameid のどちらを使うべきですか?

A

フレーム参照には name が一般的ですが、DOM 参照には id が使われます。

Q3

frames[番号] と名前参照の違いは?

A

名前参照は可読性が高く、番号参照はフレームの位置でアクセスしたい場合に便利です。

Q4

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

A

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



まとめ

  • frame.name はフレーム名を取得するプロパティ
  • frames[番号] やフレーム名と組み合わせて利用できる
  • 複数フレームを扱う際の識別に便利
  • HTML5 では非推奨のため、実務では iframe が一般的



関連記事

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

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

【JavaScript入門】iframeのcontentWindow・contentDocumentの使い方|内部ページの操作方法を初心者向けに解説

この記事で分かること iframe の contentWindow と contentDocument の違い iframe 内部の DOM を操作する方法 同一オリジン制限でできること・できないこと …

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

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

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

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

【JavaScript入門】window.openとopenerの使い方|親ウィンドウ・子ウィンドウの関係を初心者向けに解説

この記事で分かること window.open で新しいウィンドウを開く方法 opener を使った親ウィンドウ・子ウィンドウの関係 親ウィンドウから子ウィンドウを操作する方法 noopener などの …

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

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

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

執筆者: