| ポイント |
<![CDATA[
function clrData()
{
text = document.myFORM.data.value;
cnt = 0;
for (i=0; i<ptr; i++)
{
if (text != nameList[i]) tempList[cnt++] = nameList[i];
}
nameList.length = 0;
if (cnt > 0) for (i=0; i<cnt; i++) nameList[i] = tempList[i];
ptr = cnt;
nData = "";
for (i=0; i<nameList.length; i++) nData += nameList[i] + "\n";
if (!nData) nData = " ";
parent.rightFrame.printData(nData);
}
]]>
|
| 説 明 |
データを追加／削除し表示するには登録時にデータを配列に格納しておきます。削除時は配列内にあるデータと入力文字が一致するかどうか調べて一致しない場合のみ新しい配列にデータを入れていきます。新しい配列から元のデータが格納された配列にデータをコピーすれば特定のデータが削除されます。フレームごしに表示するために配列内のデータを連結（改行コードを付加）して関数を呼び出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡しテキストエリアから追加／削除する</title>
<script language="JavaScript"><!--
nameList = new Array();
tempList = new Array();
ptr = 0;
function setData()
{
nameList[ptr++] = document.myFORM.data.value;
nData = "";
for (i=0; i<nameList.length; i++) nData += nameList[i] + "\n";
parent.rightFrame.printData(nData);
}
function clrData()
{
text = document.myFORM.data.value;
cnt = 0;
for (i=0; i<ptr; i++)
{
if (text != nameList[i]) tempList[cnt++] = nameList[i];
}
nameList.length = 0;
if (cnt > 0) for (i=0; i<cnt; i++) nameList[i] = tempList[i];
ptr = cnt;
nData = "";
for (i=0; i<nameList.length; i++) nData += nameList[i] + "\n";
if (!nData) nData = " ";
parent.rightFrame.printData(nData);
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="text" name="data"><br>
<input type="button" value="登録" onClick="setData()">
<input type="button" value="削除" onClick="clrData()">
</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"><!--
nameList = new Array();
tempList = new Array();
ptr = 0;
function setData()
{
nameList[ptr++] = document.myFORM.data.value;
nData = "";
for (i=0; i<nameList.length; i++) nData += nameList[i] + "\n";
parent.rightFrame.printData(nData);
}
function clrData()
{
text = document.myFORM.data.value;
cnt = 0;
for (i=0; i<ptr; i++)
{
if (text != nameList[i]) tempList[cnt++] = nameList[i];
}
nameList.length = 0;
if (cnt > 0) for (i=0; i<cnt; i++) nameList[i] = tempList[i];
ptr = cnt;
nData = "";
for (i=0; i<nameList.length; i++) nData += nameList[i] + "\n";
if (!nData) nData = " ";
parent.rightFrame.printData(nData);
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="text" name="data"><br>
<input type="button" value="登録" onClick="setData()">
<input type="button" value="削除" onClick="clrData()">
</form>
</body>
</html>
●右側のページ(code_right.html)
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを渡しテキストエリアから追加／削除する</title>
<script language="JavaScript"><!--
function printData(txt)
{
document.myFORM.rData.value = txt;
}
// --></script>
</head>
<body>
追加／削除されたデータが表示されます。
<form name="myFORM">
<textarea name="rData" cols="40" rows="10"></textarea>
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
フレームをまたいでフォームに入力されたデータを渡しテキストエリアから追加／削除する