第９回JavaScriptゼミ セクション６－２ 発表者 直江 宗紀
frameオブジェクト概要 frameオブジェクトとは 各フレームへのアクセス記述 windowオブジェクトに属するオブジェクト フレームのドキュメントなどを扱える 各フレームへのアクセス記述 window.リファレンス.フレーム名 windowリファレンス.frames[]
frameオブジェクト frameオブジェクトのプロパティ プロパティ 説明 frames[配列] name フレーム名、<frame>タグnameアトリビュートの値 parent 親ウィンドウへの参照 self 現在のフレームへの参照 window 現在のウィンドウへの参照 frameオブジェクトのメソッド メソッド 説明 setTimeout() タイマーをスタートさせる clearTimeout() タイマーを休止させる blur() フォーカスを外す focus() フォーカスを取得する
frameオブジェクトのイベントハンドラ 説明 onblur フォーカスを失った時 onfocus フォーカスを得た時 framesetタグで使用可能なイベントハンドラ onload framesetタグ内で呼び出すフレームが全てロード完了した時 例： <frameset rows=“50,*” onload=“parent.index.init()”> <frame src=“display.html” name=“disp”> <frame src=“index.html” name=“index”> </frameset> onloadよりフレーム名indexのinit()を呼び出すプログラム
各フレームへのアクセス 別フレームへのアクセス方法 「parent」プロパティを用いる 例：topからbottomのlocationプロパティを使う parent.bottom.location = “url” ; topフレーム bottomフレーム
ウィンドウが異なる場合 別ウィンドウのフレーム ウィンドウ名のリファレンスを指定 例：window2のrightFrame背景色を変更 window2.rightrame.document.bgColor=“green” window2 – ウィンドウ名 rightFrame – フレーム名
応用プログラム例 フレームを利用したスライドショー イメージファイルのスライドショー controlフレームにより、画像を切り替える 「自動」チェックを入れると２秒間隔で切り替わる プラグラムリスト - 参考書p.327
プログラム実行結果
練習問題 スライドショーのサンプルプログラムを元に、フレームを増やし、任意に選択したページに飛ぶ仕組みを加えよ(例えば、２ページ表示状態から５ページを選択すれば、５ページ目が現れる)。なお、ページを選択するフレームの内容は問わないとする(list,link,radiobuttonなど、やり方はいろいろ)。