第78回 「フレームを操作する（フレームのURLを指定する）」
今回はフレームについて説明します。
HTMLでフレームを指定する場合には<frameset>と<frame>を使います。<frameset>でフレームの分割方法と分割サイズを指定し、<frame>で表示されるURLを指定します。
JavaScriptでフレームを操作する場合には「フレーム名」または「フレーム参照番号」を使います。まずフレーム名での指定ですが、以下のように<frame>タグ内にname属性を使って指定します。
<html>
<head>
<title>Frame Sample</title>
<frameset cols="20%,*">
<frame src="left.html">
<frame src="right.html" name="rPage">
</frameset>
</head>
</html>
このサンプルでは右フレームに「rPage」という名前を指定しています。このようにするとフレームの右ページはJavaScriptで以下のように指定することができます。
parent.rPage.〜
フレームに指定する名前ですが、できれば他の人が使わないような名前にしておく方が良いでしょう。同じ名前にしてしまうと、今まで正常に動作していたフレームページが正しく動作しなくなる事があります。（過去に実際にありました）
フレーム名は英文字で始まり英文字と数字の組み合わせにしてください。
右ページのURLを変更する場合には以下のようになります。入れ替えるページURLはright2.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>
フレーム名でなくフレーム参照番号を使う場合には以下のようになります。
parent.frames[参照番号].〜
参照番号は0から始まります。では、どれが一番最初のフレームなんでしょうか？ これは<frameset>内に定義された順番になります。上記サンプルをフレーム参照番号に書き換えると以下のようになります。
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function change()
{
parent.frames[1].location.href = "right2.html";
}
// --></script>
</head>
<body>
■<a href="javascript:change()">クリックする</a>と右ページの内容が変わります。
</body>
</html>
right.htmlが表示されているフレームは２番目なのでframes[1]のようになります。
parentというのはフレームが定義された親を示します。これは<frame>が定義されているフレームセット全体を示します。フレームの中にフレームが入っている場合には、親の親になるため
parent.parent.フレーム名.〜
という書き方になります。実際のサンプルについては次回説明します。