クエリ情報を取得する

<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;
});

サンプル
次の「ウィンドウを開く」をクリックすると、別ウィンドウに伝えられた②のクエリ情報を③で表示する。