第79回 「フレームを操作する（フレームのURLを指定する、その２）」
今回は前回の続きでフレームのURLを指定する方法について説明します。
前回親フレームを指定するには
parent.フレーム名.〜
と指定すると書きました。このparentは親フレームを示しますが、フレーム内にさらにフレームがある場合には以下のようにparentを2つ列記します。
parent.parent.フレーム名.〜
実際のサンプルを見てみましょう。以下のサンプルで
●フレーム分割ファイル１
<html>
<head>
<title>Frame Sample</title>
<frameset cols="20%,*">
<frame src="left.html">
<frame src="index2.html" name="rPage">
</frameset>
</head>
</html>
●フレーム分割ファイル２
<html>
<head>
<title>Frame Sample</title>
<frameset cols="20%,*">
<frame src="left.html">
<frame src="right.html" name="rPage">
</frameset>
</head>
</html>
●left.html
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function change()
{
parent.rPage.location.href = "right2.html";
}
// --></script>
</head>
<body>
■<a href="javascript:change()">クリックする</a>と右ページの内容が変わります。
</body>
</html>
フレーム分割ファイル１，２とも左ページは同じleft.htmlです。フレーム分割ファイル２にあるleft.htmlのリンクをクリックすると、その右側のページが入れ替わります。フレーム分割ファイル１で分割された左側のページのリンクをクリックすると右側のフレーム分割ページが、ごっそり入れ替わります。name属性で同じ名前を指定していてもparentで正しくフレームの場所を指定していれば目的のフレームを入れ替えることができます。
フレーム分割ファイル２で分割された左ページからフレーム分割ファイル２の右フレームを入れ替えるには最初に説明したparent.parent〜のように指定します。実際のサンプルは以下のようになります。
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function change()
{
parent.parent.rPage.location.href = "right2.html";
}
// --></script>
</head>
<body>
■<a href="javascript:change()">クリックする</a>と右ページの内容が変わります。
</body>
</html>
フレームの場所を示すのにはparent以外にtopとselfがあります。selfは自分自身を示し、通常は省略できます。topはフレームの先頭を示します。フレームが何重にも入れ子になっていて、全てフレームを解除したい場合に使います。
次回は全フレームを解除する方法について説明します。