jQueryでURLやパラメータを取得するにはlocationを使う

jQueryで表示しているページのURLやパラメータを取得することができれば、if文の条件分岐を使ってページごとに表示を変えることができます。

Locationオブジェクトを使う

jQueryで表示しているページのURLやパラメータを取得したい場合、JavaScriptで用意されているLocationオブジェクトを利用することで可能です。

「location.プロパティ」という風に指定することで、URLやパラメータはもちろん、ドメイン名やポート番号など、様々な情報を取得することができます。

たとえば、次のようなURLのページが表示中だとして、どのように取得するか確認してみます。

例. https://www.example.com:8000/index.html?area=japan#link

URL全体を取得する場合は「location.href」を指定します。

location.href
// 取得結果 https://www.example.com:8000/index.html?area=japan#link

ドメイン名を取得する場合は「location.host」を指定します。

location.host
// 取得結果 https://www.example.com:8000

ポート番号を取得する場合は「location.port」を指定します。

location.port
// 取得結果 8000

プロトコルを取得する場合は「location.protocol」を指定します。

location.protocol
// 取得結果 https:

パスを取得する場合は「location.pathname」を指定します。

location.pathname
// 取得結果 index.html

パラメータを取得する場合は「location.search」を指定します。

location.search
// 取得結果 ?area=japan

ページ内アンカーを取得する場合は「location.hash」を指定します。

location.hash
// 取得結果 #link

jQueryのattr()メソッドを使って、URLを取得することもできます。

たとえばURL全体を取得する場合は次のように書きます。

$(location).attr(‘href’);

JavaScriptのlocationオブジェクト同様、ドメイン名、ポート番号、プロトコル、パラメータ、ページ内アンカーの取得もできます。

locationオブジェクトやattrメソッドを使うことでURLやパラメータを取得する方法を紹介しました。

取得した情報を使って、条件分岐させることで、ページごとに処理を変えることができます。

$(window).on(‘load’, function(){
　var url = location.href
　if (url == “http://sample.com”) {
　　// URLが http://sample.com の場合に実行
　}
});