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

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

フレーム

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

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

JavaScriptのframe.locationとは?フレームのURL(URI)を参照する方法を初心者向けに解説

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



locationプロパティとは?

location は、フレーム(またはウィンドウ)が表示しているページのURLを参照するプロパティです。

フレーム.location

フレーム名または frames[番号] を使って参照できます。

使用例: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 の使用が一般的
  • 異なるドメインのフレームにアクセスすると同一オリジン制限でエラーになる

まとめ

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

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-フレーム
-

執筆者:

関連記事

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

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

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

JavaScriptのFrameオブジェクトとは?frames配列・フレーム参照方法を初心者向けに解説 Frameオブジェクトは、ウィンドウ内に配置されたフレーム(<frame> 要素)を …

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

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