第81回 「フレームのプロパティを操作する」
今回はフレームのプロパティを操作する方法について説明します。
まず、左右にフレーム分割されたページで左ページのリンクをクリックすると右ページの背景色を赤色に変えてみます。
フレームで区切られていない場合には以下のように書くと背景色を赤色にすることができます。
document.bgColor = "red";
これは昔からの書き方で古いブラウザでも動作します。現在ではスタイルシートを使って背景色を指定する場合もあり、JavaScriptでもスタイルシートのbackgroundColorプロパティにアクセスして背景色を変更することもできます。この場合には以下のように書きます。
document.getElementById("タグのID").style.backgroundColor = "red";
フレームで分割されている場合には、どのフレームの背景色かを指定する必要があります。これは、今まで同様にparentを使って以下のように書きます。
parent.フレーム名.document.bgColor = "red";
フレーム名は<frame>タグのname属性で指定した名前になります。parentでなくtopを使うと先頭のフレームを指定することができます。ただし、同一ドメインでない場合にはセキュリティの都合上エラーになります。topを使った場合には以下のようになります。
top.フレーム名.document.bgColor = "red";
実際のプログラムは以下のようになります。左フレームにあるリンクをクリックすると右ページの背景色が赤色になります。
●フレーム分割ファイル
<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 changeBGColor(col)
{
parent.rPage.document.bgColor = col;
}
// --></script>
</head>
<body>
■<a href="javascript:changeBGColor('red')">右ページの背景色を赤色にする</a><br>
</body>
</html>
●right.html
<html>
<head>
<title>sample</title>
</head>
<body bgColor="white">
右ページです。
</body>
</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 changeText()
{
parent.rPage.document.getElementById("header").innerHTML = "文章が入れ替わりました！";
}
// --></script>
</head>
<body>
■<a href="javascript:changeText()">右ページのヘッダーの文章を入れ替える</a><br>
</body>
</html>
●right.html
<html>
<head>
<title>sample</title>
</head>
<body bgColor="white">
<div id="header" style="border:2px red solid">ここの先頭の文章が入れ替わります</div>
</body>
</html>
右フレームにあるオブジェクトにアクセスするには、いくつかの方法がありますがサンプルではgetElementByIdを使ってページ内の特定のIDを持つオブジェクト（DIVタグ）を指定しています。テキストの入れ替えはinnerHTMLを使っています。Internet Explorerの場合にはinnerTextを使って純粋にテキストだけを入れ替えることができます。
同様にフォームの内容や各種プロパティにアクセスすることができます。
次回は別フレームにある関数を利用する方法について説明します。