<form method=”POST”>で送信するポストデータが、まとまった情報を送信するのに適しているのに対して、ちょっとしたキー情報を受け渡しするのに向いているのがクエリ情報である。
クエリ情報とは、リンクなどのURLの末尾「?~」以降に付加された簡易なデータのことで、「キー名=値」で記述する。
このクエリ情報を、Location.serchプロパティを利用することで取得することができる。
①次のソースプログラムはLocation.serchを使ってクエリ情報を連想配列に取り出す例である。
function get_query(){
// 解析済みのクエリ情報を格納するためのを用意
var result = {};
// クエリ情報の2文字目以降(?を除く部分)を抽出
var str = location.search.substring(1);
// &で分割し、キー名=値という文字列を順に取得
var params = str.split('&');
for(var i=0; i<params.length; i++){
// キー名=値を=で分割し、キーと値を取得
var kv = params[i].split('=');
// 値はエンコードされている可能性があるので、あらかじめデコード
result[kv[0]] = decodeURIComponent(kv[1]);
}
// できあがった連想配列を戻り値として返す
return result;
}
②別ウィンドウを生成するurlに次のようなクエリ情報を設定する。
var surl = 'http://sample.sakuraweb.com/java6/query2.html';
var title = encodeURI('こんにちは');
var name = encodeURI('柴原');
var url = surl + '?title=' + title + '&name=' + name;
window.open(url,'サンプル','width=600,height=600');
③開かれたウィンドウでは上記で示したしたLocation.serchを使ってクエリ情報(titleとnameキーの値)を取り出して表示する。
addListener(window,'load',function(){
var q = get_query();
var msg = q.title + ' ' + q.name + 'さん';
document.getElementById('result').textContent = msg;
});
サンプル
次の「ウィンドウを開く」をクリックすると、別ウィンドウに伝えられた②のクエリ情報を③で表示する。