第82回 「別フレームの関数を呼び出す」
今回は別フレームに定義されている関数を呼び出す方法について説明します。
前回は別フレームにあるプロパティを操作しましたが、同じ要領でプロパティの変わりにメソッドを指定すると関数を呼び出すことができます。
例えば左右のフレームがあり、左フレームから右フレームにある関数を呼び出す場合には以下のようになります。
parent.右フレーム名.関数名
フレーム名は<frame>タグのname属性で指定した名前になります。関数を呼び出す場合にも同一ドメインでない場合にはセキュリティの都合上エラーになります。
別フレームのプロパティを直接操作してエラーになる場合や、期待通りに動かない、値を書き込めない場合には関数を利用して処理するとうまくいくことがあります。
以下のプログラムは左フレームから右フレームの関数を呼び出して、右フレームにあるフォームのテキストフィールドに文字を表示するものです。
●フレーム分割ファイル
<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.wrtFormMsg("テキストフィールドに文字が表示されます");
}
// --></script>
</head>
<body>
■<a href="javascript:changeText()">右ページのフォームのテキストフィールドに文字を表示する</a><br>
</body>
</html>
●right.html
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function wrtFormMsg(txt)
{
document.myForm.myText.value = txt;
}
// --></script>
</head>
<body>
<form name="myForm">
<input type="text" name="myText" size="80">
</form>
</body>
</html>
MacOS X用のブラウザSafariでは別フレームでなくフレーム分割ページにある関数も呼び出すことができます。他のブラウザでは呼び出せない*1ので、いずれ使えなくなる可能性はあります。Safariでフレーム分割ページの関数を呼び出すには以下のように書きます。
parent.関数名
他のブラウザでは正常に動作せずエラーになったりMacOS X版のOpera 6.03のようにハングアップしてしまうものもあります。
以下のサンプルはSafariのみで動作し、２つの値を加算してアラートダイアログに表示するものです。
*1 昔のNetscape 3などではwindow.name="名前"のようにして名前を指定すればフレーム分割ページの関数も呼び出すことができました。現在のバージョンおよびMozillaでは、このようにしても動作しません。
●フレーム分割ファイル
<html>
<head>
<title>Frame Sample</title>
<frameset cols="20%,*">
<frame src="left.html">
<frame src="right.html" name="rPage">
</frameset>
<script language="JavaScript"><!--
function add(a,b)
{
n = a + b;
alert(a+"+"+b+"の加算結果は"+n+"です。");
}
// --></script>
</head>
</html>
●left.html
<html>
<head>
<title>Sample</title>
</head>
<body>
■<a href="javascript:parent.add(2,6)">2+6を計算する</a><br>
</body>
</html>
●right.html
<html>
<head>
<title>Sample</title>
</head>
<body>
■<a href="javascript:parent.add(10,8)">10+8を計算する</a><br>
</body>
</html>
次回はインラインフレームのURLを変更する方法について説明します。