QueryString 取得プラグイン jquery.exQueryString.js を作ってみた

ありがちなプラグインかなと思い調べたところ jQuery プラグインではありませんが、いくつか見つかりました。

ただ上記のスクリプトの場合、

  • script タグの src プロパティの QueryString のみ取得可
  • パラメータの異なる同一スクリプトファイルの読み込みは非対応

という制約があったので、これらの制約をクリアした実装を考えてみました。

使用例

外部 script 定義ファイルから自身の QueryString を取得する

自身のスクリプトファイル名を引数に $.ex.queryString() メソッドを実行することで json 形式の QueryString を取得できます。

script 読み込み側

<script src="sample.js?p1=aaa&p2=bbb"></script>

読み込まれる script (sample.js)

var param = $.ex.queryString('sample.js');
alert(param.p1); // aaa
alert(param.p2); // bbb

サンプルページ

注意点として、Firefox2 以下のバージョンに限り、「パラメータ違いの同一スクリプト」を読み込む場合は、DOM ツリー構築後に $.ex.queryString を実行する必要があります。(読み込み直後では自身の scrpit タグの存在を認識してくれないようです。)

window.location.href の QueryString を取得する

自身の URL の QueryString を取得します。$.ex.queryString メソッドを引数なしで実行することで取得できます。

URL

http://sample.html?p1=aaa&p2=bbb
var param = $.ex.queryString();
alert(param.p1); // aaa
alert(param.p2); // bbb

サンプルページ

a.href の QueryString を取得する

a 要素に限らず href または src プロパティを持つ要素を jQuery で取得し、exQueryString() メソッドを実行することで取得できます。

<a id="link" href="sample.php?p1=aaa&p2=bbb">link</a>
//sample.js
var param = $('#link').exSueryString();
alert(param.p1); // aaa
alert(param.p2); // bbb

サンプルページ

対応ブラウザ

下記ブラウザで動作確認済みです。

(但し、FireFox 1.5 / 2 の場合は一部制約があり。前述参照。)

ダウンロード

こちらからどうぞ。

jquery.exquerystring.js