QueryString 取得プラグイン jquery.exQueryString.js を作ってみた
ありがちなプラグインかなと思い調べたところ jQuery プラグインではありませんが、いくつか見つかりました。
- JavaScriptファイルに引数を渡す - hail2u.net
- 外部Javascriptのsrc属性で、URL引数を取得する - CSS-EBLOG
- JavaScriptファイルに引数を渡す(なるほどねー)- NOBDY:PLACE
ただ上記のスクリプトの場合、
- 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
対応ブラウザ
下記ブラウザで動作確認済みです。
- Internet Explorer 6 / 7 / 8
- FireFox 1.5 / 2 / 3
- Safari 3
- Opera 9.6
- Google Chrome
(但し、FireFox 1.5 / 2 の場合は一部制約があり。前述参照。)