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

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

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

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

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

JavaScriptのFrameオブジェクトとは?frames配列・フレーム参照方法を初心者向けに解説

Frameオブジェクトは、ウィンドウ内に配置されたフレーム(<frame> 要素)を参照・操作するためのオブジェクトです。
フレームは現在では非推奨ですが、JavaScript の基礎として frames 配列の仕組みを理解しておくと役立ちます。



フレームを参照する方法

フレームは次の2つの方法で参照できます。

  • フレーム名で参照
  • frames[番号] で参照

1. フレーム名で参照する

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

<frame name=”IFrame”>

このフレームを参照するには次のように書きます。

frames[“IFrame”];

2. 参照番号(インデックス)で参照する

フレームは frames 配列に格納されており、0 から始まる番号でアクセスできます。

frames[1];

→ ドキュメント内で 2 番目に記述されたフレームを参照します。



frames.length:フレームの総数を取得

frames.length は、ウィンドウ内に存在するフレームの総数を返します。

// トップフレームにあるフレームの総数を表示
document.write(“フレーム総数:” + top.frames.length);

→ フレーム数を調べたいときに便利です。

DOMでフレームを参照する場合

フレームに id が付いている場合は、通常の DOM と同じように参照できます。

document.getElementById(“enqFrame”);

→ <frame id=”enqFrame”> を参照します。

注意点

  • フレーム(frameset)は HTML5 では非推奨
  • モダンWebでは iframe の使用が一般的
  • Frameオブジェクトは Window オブジェクトと互換性がある

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

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

  • 紙の本でじっくり読み込みたい
  • 体系的にまとまった教材で学びたい
  • ネット記事だけだと情報が断片的に感じる

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

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

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

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

  • JavaScriptの基本文法をやさしく理解できる
  • 手を動かしながら学べるため、挫折しにくい
  • 「まず動くものを作ってみたい」が実現できる

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

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

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

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

  • JavaScriptの基礎を体系的に学び直せる
  • 初心者がつまずきやすい部分を重点的に理解できる
  • 実務で使えるレベルの基礎力を身につけられる

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

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

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

  • エラーの原因が分からず、調べても解決できない
  • 学習の順番に自信が持てない
  • モチベーションが続かず、途中で止まってしまう
  • 実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

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

  • あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
  • 独学で詰まりやすいポイントを事前に教えてくれる
  • 学習方法の改善点をプロがアドバイスしてくれる
  • エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

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



まとめ

  • frames["名前"]:フレーム名で参照
  • frames[番号]:インデックス番号で参照
  • frames.length:フレームの総数を取得
  • DOM では getElementById() で参照可能

関連記事

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

JavaScriptのparent・top・selfとは?フレーム階層を参照する方法を初心者向けに解説 parent・top・self は、フレーム(またはウィンドウ)同士の階層関係を参照するためのプ …

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

JavaScriptのframe.nameとは?フレーム名を取得する方法を初心者向けに解説 frame.name は、特定のフレームに設定されている名前(name属性)を参照するためのプロパティです。 …

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

JavaScriptのframe.locationとは?フレームのURL(URI)を参照する方法を初心者向けに解説 frame.location は、特定のフレームが現在表示しているページ(URI)を …

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

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

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

執筆者: