◆ はじめに
前回は、ウィンドウ間データの受け渡しをご説明致しましたが、今回は、ページ間データの受け渡しをご説明致します。
普通、ページ間データの受け渡しは、CGIのpostやgetでサーバー側で処理をしますが、実は、JavaScriptを使えば、クライアント側だけでも可能です。
また、クライアント側だけで可能な方法は２通りあり、クッキーを使用する方法とsearchメソッドを使用する方法があります。今回は、searchメソッドを使用する方法をご説明致します。
尚、クッキーを使用する方法は「クッキーオブジェクト」を参照してください。
注意
尚、本プログラムのような、外部から引数で値を受け取るプログラムは、「与えられた引数が信頼できる値であると、頭から信用しないこと」が、肝要です。改造時は、XSS（Cross Site Scripting）脆弱にならないよう気をつけてください。
◆ ページ間データの受け渡しの方法
searchメソッドを使ったページ間データの受け渡しは、URLの引数（?以降）を求めることにより実現することが出来ます。
たとえば、location.search でURLの引数の ?modefg=9&xxx=77&yyy=888&zzz=9999 という文字列を取得することができます。
しかし、取得した文字列をプログラム内で使用する時に、NAME（modefg,xxx,...）と値（9,77,...）に分割したり、いろいろと編集が必要です。そこで、そこを、以下の『ゲット引数オブジェクト』が担当するわけです。
まずは、ソースをご覧ください。
◆ ゲット引数オブジェクト
function getHikisuu(){
getHikisuu.data = new Array();
getHikisuu.string = location.search.substring(1);//?をサプレス
getHikisuu.string = getHikisuu.string.split('&');
for(var i = 0; i != getHikisuu.string.length; i++) {
getHikisuu.data[ck_shikibetushi(getHikisuu.string[i].split('=')[0])]
= Escape(unescape(getHikisuu.string[i].split('=')[1]));
}
function ck_shikibetushi(shiki){ //識別子（プロパティ）の命名チェック
shiki_TOP = shiki.substring(0,1);
if(shiki_TOP.match(/[a-zA-Z_$]/g) == null){
alert(shiki+"の引数が不正です。（一文字目は、ASCII、_、$、のいずれかです。）");
return null;
}
else if(shiki.match(/[^a-zA-Z0-9_$]/g) != null){
alert(shiki+"の引数が不正です。（命名文字は、ASCII、数字、_、$、のいずれかです。）");
return null;
}
return shiki;
}
function Escape(str){ //文字参照へ変換
str = str.replace( /\&/g, '&' );
str = str.replace( /</g, '<' );
str = str.replace( />/g, '>' );
str = str.replace( /\"/g, '"' );
str = str.replace( /\'/g, ''' );
return str;
}
} new getHikisuu();
説明
クリックする側のURLの引数は、以下の形式限定です。
?NAME1=値1&NAME2=値2&NAME3=値3...&NAMEn=値n
『ゲット引数オブジェクト』側で、引数をlocation.searchで求め、各々NAMEをgetHikisuu.data配下のプロパティにして、そこに各々の値を代入しています。
まず、「&」で分割してstring配列を作り、string配列数分、今度は「=」で分割して、NAMEはプロパティにし、値はそのプロパティに代入します。
要は、NAMEを連想配列のインデックスにして、そこが示すところへ値を代入しています。（連想配列のインデックスはプロパティと等価）
尚、location.search.substring(1);は、引数の１カラムめの「?」が邪魔なので削っています。 unescape関数は、URLデコードをしています。
注意事項
NAMEnの実際の名前（プロパティ）は、一文字目がASCII、_、$のいずれかで、一文字目以外が、ASCII、_、$、数字のいずれかとしてください。
値nは、任意とします。
使用方法
たとえば、A.htmに以下のリンクがあったとします。
<a href="t207081.htm?modefg=9&xxx=77&yyy=888&zzz=9999">aaaaaa</a>
そして、以下のt207081.htmで『ゲット引数オブジェクト』を利用することにより、getHikisuu.data配下にNAMEnプロパティが作成され、そのプロパティで各々の値nを参照することができます。
<script type="text/javascript">
function getHikisuu(){
getHikisuu.data = new Array();
getHikisuu.string = location.search.substring(1);//?をサプレス
getHikisuu.string = getHikisuu.string.split('&');
for(var i = 0; i != getHikisuu.string.length; i++) {
getHikisuu.data[ck_shikibetushi(getHikisuu.string[i].split('=')[0])]
= Escape(unescape(getHikisuu.string[i].split('=')[1]));
}
function ck_shikibetushi(shiki){ //識別子（プロパティ）の命名チェック
shiki_TOP = shiki.substring(0,1);
if(shiki_TOP.match(/[a-zA-Z_$]/g) == null){
alert(shiki+"の引数が不正です。（一文字目は、ASCII、_、$、のいずれかです。）");
return null;
}
else if(shiki.match(/[^a-zA-Z0-9_$]/g) != null){
alert(shiki+"の引数が不正です。（命名文字は、ASCII、数字、_、$、のいずれかです。）");
return null;
}
return shiki;
}
function Escape(str){ //文字参照へ変換
str = str.replace( /\&/g, '&' );
str = str.replace( /</g, '<' );
str = str.replace( />/g, '>' );
str = str.replace( /\"/g, '"' );
str = str.replace( /\'/g, ''' );
return str;
}
} new getHikisuu();
document.write("<p>");
document.write("modefgの値は、" + getHikisuu.data.modefg +"<br>");
document.write("xxxの値は、" + getHikisuu.data.xxx +"<br>");
document.write("yyyの値は、" + getHikisuu.data.yyy +"<br>");
document.write("zzzの値は、" + getHikisuu.data.zzz +"<br>");
document.write("</p>");
</script>
<p>もう一度<br>
<a href="t207081.htm?mo_$defg=9&xxx=1%3C1&yyy=%41%42222&zzz=3333">t207082.htm?modefg=9&xxx=11&yyy=222&zzz=3333</a></p>
サンプル
以下をクリックしてください。