| ポイント |
<![CDATA[
text = document.myFORM.data.value;
parent.rightFrame.dataFunc(text);
document.myFORM.rData.value = txt;
]]>
|
| 説 明 |
他フレーム内のオブジェクトが操作できなくなっても関数は呼び出すことができるため、「parent.フレーム名.関数名(引数)」として呼び出します。引数に渡すデータを指定すれば、いくつでも任意のデータを他フレームに渡すことができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡す</title>
<script language="JavaScript"><!--
function sendData()
{
text = document.myFORM.data.value;
parent.rightFrame.dataFunc(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.dataFunc(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 dataFunc(txt)
{
document.myFORM.rData.value = txt;
}
// --></script>
</head>
<body>
渡されたデータです。
<form name="myFORM">
<input type="text" name="rData">
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
フレームをまたいでフォームに入力されたデータを渡す