梅ちゃん堂 > JavaScript 入門 > JavaScript 実用編 >
- フレームの制御 -

フレームについて

フレームは WWW ブラウザの機能です。 つまり、1つのウィンドウ内に複数ページをフレーム分割して表示させることにより、使いやすさを工夫したものであり、 その仕様は WWW ブラウザに依存しています。<NOFRAMES> タグの併用が推奨されているのは、そのためです。 (JavaScript をサポートしているブラウザはすべて、フレームもサポートしていますが。)

ここで簡単にフレームのおさらいをしてみましょう。 フレーム付きの画面を表示するには、フレーム設定ページが必要です。 フレーム設定ページは画面のフレーム分割と各フレームのデフォルトページを定義したものであり、 ユーザーエージェントはフレーム設定ページのアドレスにアクセスすることにより、 フレーム付きページの入り口に到達します。

例:
<HTML>
  <HEAD>
    <TITLE>簡単なフレーム設定ページ</TITLE>
  </HEAD>
  <FRAMESET cols="30%, *">
    <FRAME src="contents.htm" name="contents">
    <FRAME src="welcome.htm" name="main">
    <NOFRAMES>
      <P>当サイトはフレームを使用しております。フレーム非サポートブラウザをお使いの場合は以下のアドレスからお入り下さい。</P>
      <UL>
        <LI><A href="welcome.htm">ようこそ当サイトへ</A>
        <LI><A href="contents.htm">目次</A>
      </UL>
    </NOFRAMES>
  </FRAMESET>
</HTML>

 ---------------------------------------
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|CONTENTS |           MAIN              |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------


      

上の例で注意してほしいのは、各フレームのリンク先に付けられた name 属性です。 これは必須ではありませんが、これを設定しておくことにより、現在のページから他フレームのリンク先を指定するのに役立ちます。

例:
<A href="test.htm" target="contents">左フレームのリンク先変更</A>
メインページに上記リンクを入れることにより、別フレームのリンク先を指定することが出来る。

この書き方は、別ウィンドウを開く場合の指定方法とそっくりです。 事実、"contents" という name を持つフレームが現に存在しなければ、 ブラウザは別ウィンドウに上記リンク先を開いて、それに "contents" という name を持たせるでしょう。

JavaScript では、フレーム設定ページには parent というオブジェクトが割り当てています。 従ってフレーム設定ページで設定された各フレームは、その frames オブジェクトの配列要素(子フレーム)を高制することになります。

これに対して現在のページには self、 画面の一番上のフレームには top というオブジェクトが割り当てられます。 (画面の一番上のフレームが特に無い場合、topparent と同じになります。

各フレームオブジェクトは frames.length(子フレームの数)、 name(フレーム設定ページで設定された名前)、location(フレーム内に表示されるページの URL)、 及び frames[0 を最初とする配列番号](子フレームの各要素)というプロパティがあり、 これによってフレーム情報を参照することが出来ます。

location プロパティはフレーム内に表示されるページの URL を参照するだけで、 設定することは出来ません。設定するには location.href を使います。

parent.frames[0].location.href = "test.htm";

子フレームの name がわかっている場合には、次のように書くこともできます。

parent.contents.location.href = "test.htm";

これは上に例示した

<A href="test.htm" target="contents">左フレームのリンク先変更</A>

と同じことになります。

このように、フレームオブジェクトには少数のプロパティがあるのみで、 特別なメソッドがあるわけではありませんが、実はフレームオブジェクトはウィンドウオブジェクトに属するオブジェクトやプロパティ、 メソッドを継承していて、すべてではないものの、その多くを使用することが出来ます。 例えば、

parent.frames[0].document.write("HELLO!");

や、

parent.frames[0].scrollBy(20,20);

などは動作可能です。 フレームオブジェクトの親フレームと子フレームの関係が、ウィンドウオブジェクトの親ウィンドウと子ウィンドウの関係に類似していることにも気づかれたと思います。 ウィンドウオブジェクトに属する下位オブジェクトやプロパティ、メソッド並びにイベントが、 どの程度までフレームオブジェクトに適用できるのかはご自分で試してみて下さい。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved