ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
１２／３０日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.26★
| フレームの操作 |
今回はフレームの操作をやってみよう。
フレームの操作といっても、今までやったようなウィンドウの操作とあまり変わらない。
前回までのウィンドウの操作をキチンとわかっている人は、一度読むだけで理解できると思うよ。
| ★ 親のウィンドウを操作する ★ |
早速フレームの操作の命令を書いておこう。
フレームに命令する |
parent.フレーム名.命令 |
parentというのは親ウィンドウ。つまり、現在見ているブラウザの画面全体をさしているんだ。
フレームというのは、ブラウザの中をいくつかのフレームに分けて、その中にページをはめ込んでいたんだね。(ＨＴＭＬ講座参照)
つまり、その分けたフレームそれぞれに名前を付けておけば、ウィンドウと同じようにしてその名前を使って、フレームの操作ができるんだ。
じゃあ、簡単なフレームの操作の例を見て解説しよう。
◆１、フレームを作る◆
<HTML>
<FRAMESET rows="30%,*">
<FRAME src="frame1.html" name="top"> ←名前をtopにした（フレームの操作で使う）
<FRAMESET cols="50%,*">
<FRAME src="frame2.html" name="left"> ←名前をleftにした（フレームの操作で使う）
<FRAME src="frame3.html" name="right"> ←名前をrightにした（フレームの操作で使う）
</FRAMESET>
</FRAMESET>
</HTML>
| frame1.html | |
| frame2.html | frame3.html |
↑このようなフレーム構成
まず、これでそれぞれのフレームができたね。
じゃあ、これからそれぞれのフレームを操作するために、frame1.htmlのファイルを作ってやろう。
(frame1.htmlは上のようにフレームに入れるファイルとする)
◆２、frame1.htmlファイル◆
<HTML>
<HEAD>
<TITLE>フレーム操作</TITLE>
<SCRIPT language="JavaScript">
function change(){
parent.left.location.href="frame3.html";
↑さっき名前を付けたleftというフレームのページを変更。
parent.right.location.href="frame2.html";
↑さっき名前を付けたrightというフレームのページを変更。
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="ページを交換する"
onClick="change()">
</BODY>
</HTML>
重要なのは、
parent.left.location.href="frame3.html";
の部分だね。
parent.フレーム名.命令
のようになっているね。(前回のlocation.hrefの命令を覚えているかな？)
これで、leftという名前をつけたフレームを操作できるんだ。
このようにして、フレームの操作は、parent.フレーム名.命令を覚えてしまえば簡単に操作できるようになっているんだ。
今までの命令と組み合わせてどんどんフレームを操作していこう！