静的HTMLでもURLパラメータ渡しは可能です。
例えば以下のような呼び出し方です。
sample.html?id=test&date=2018-12-19&page=2
プログラムをされておられる方ならおなじみです。
?は以降パラメータを意味します。
&は次のパラメータ開始を意味します。
=を挟んで左がパラメータ名で、右が値を意味します。
上記の例だと以下のような意味になります。
id : test
date : 2018-12-19
page : 2
PHPなどプログラムであれば、これらのURLパラメータの値を取得することは容易にできます。例えばPHPの記述であれば、以下のように変数としてパラメータを使用します。
echo $_REQUEST[“id”] ・・・ 「test」が表示されます
echo $_REQUEST[“date”]・・・「2018-12-19」が表示されます。
echo $_REQUEST[“page”]・・・「2」が表示されます。
しかしこれがJavascriptだと簡単にはいきません。
そこで、PHPのようにURLパラメータを取り出す関数がないか探してみました。
ググってみたらたくさん出てきましたが、いまひとつ使い勝手が難しい
いつものごとくGoogleで探してみたところたくさん出てきました。
ただ、どれも独自性が強く汎用性が低かったため、これらを参考に作ってみることにしました。
やりたいことは、Javascriptでパラメータを連想配列で使用することです。
PHPのように連想配列化されていれば、汎用性が高くなります。
これを念頭に置いて考えてみました。
作ってみた関数がこちら
<script>
function para_get()
{
// URLパラメータを"&"で分離する
var url_search = location.search.substr(1).split('&');
// パラメータ連想配列エリア初期化
var para = [];
// キーエリア初期化
var key = null;
for(var i = 0 ; i < url_search.length ; i++)
{
// "&"で分離したパラメータを"="で再分離
key = url_search[i].split("=");
// パラメータを連想配列でセット
para[key[0]] = key[1];
}
// 連想配列パラメータを返す
return (para);
}
</script>考え方は、URLパラメータ文字列の分割分離作業です。
今回の例だと、パラメータ部分は「?id=test&date=2018-12-19&page=2」なので、&と=を分割・分離してゆきます。
location.search.substr(1)の１は、パラメータの1文字目が「?」なので2文字目からを使用するという意味です。事実上「?」の文字をカットしています。
split(‘&’)は、「＆」の文字を境に文字列を分割しています。
この段階で変数のurl_searchには以下のように格納されています。
url_searchの中身
“id=test”, “date=2018-12-19”, “page=2”
3つのパラメータがあるので、for文でパラメータの数分ループし、今度は「=」の文字を境に分割します。
変数keyには以下のように格納されてゆきます。
key変数1回目
“id”, “test”
key変数2回目
“date”, “2018-12-19”
key変数3回目
“page”, “2”
左側がパラメータ名なので、連想名としてセットします。
右側がパラメータの値なので、連想配列の値としてセットします。
これでPHPのようにURLパラメータを扱うことができます。