| ポイント |
<![CDATA[
function addData(txt)
{
fTxt = document.myFORM.rData.value;
fTxt = fTxt + txt + "\n";
document.myFORM.rData.value = fTxt;
}
]]>
|
| 説 明 |
他フレーム内のオブジェクトが操作できなくなっても関数は呼び出すことができるため、「parent.フレーム名.関数名(引数)」として呼び出します。引数に渡すデータを指定すれば、いくつでも任意のデータを他フレームに渡すことができます。渡されたデータをフォームのテキストエリアに追加するには、テキストエリアのデータを読み出し、フレームごしに渡されたデータを連結します。改行する場合は\nを末尾に付加します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡しテキストエリアに追加／表示する</title>
<script language="JavaScript"><!--
function sendData()
{
text = document.myFORM.data.value;
parent.rightFrame.addData(text);
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="text" name="data"><br>
<input type="button" value="受渡し" onClick="sendData()">
</form>
</body>
</html>
]]>
|
| 補足説明 |
他フレームにデータを渡すにはいくつか方法がありますがセキュリティの都合で簡単にフレーム内のオブジェクトが操作しにくくなってきています。同一ドメイン内でないとデータの受け渡しはできません。
フレーム分割のページ等の内容は以下の通りです。
<![CDATA[
●フレーム分割ページ
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡しテキストエリアに追加／表示する</title>
<frameset cols="20%,*">
<frame src="code_left.html">
<frame src="code_right.html" name="rightFrame">
</frameset>
</head>
</html>
●左側のページ(code_left.html)
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡しテキストエリアに追加／表示する</title>
<script language="JavaScript"><!--
function sendData()
{
text = document.myFORM.data.value;
parent.rightFrame.addData(text);
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="text" name="data"><br>
<input type="button" value="受渡し" onClick="sendData()">
</form>
</body>
</html>
●右側のページ(code_right.html)
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡しテキストエリアに追加／表示する</title>
<script language="JavaScript"><!--
function addData(txt)
{
fTxt = document.myFORM.rData.value;
fTxt = fTxt + txt + "\n";
document.myFORM.rData.value = fTxt;
}
// --></script>
</head>
<body>
渡されたデータが追加されます。
<form name="myFORM">
<textarea name="rData" cols="40" rows="10"></textarea>
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
フレームをまたいでフォームに入力されたデータを渡しテキストエリアに追加／表示する