
URL情報を取得・出力などをする JavaScript の location オブジェクトについてのメモです。
location オブジェクトを使う時
URLにはサーバー名やポート番号、ファイル名といった様々な情報が含まれています。location オブジェクトにはそのURLの情報が格納されています。
プログラムを構築する際にサイトページのURL情報を取得して、そこへ移動させたり、ページの情報によって処理を変えたり、とあるページから遷移した場合に追加情報をつけて表示する内容を変更したりなどなど、この location オブジェクトにある情報を利用することができます。
基本の使い方
基本コードは以下の形です。
location.プロパティ or メソッド
console.log(location);
でコンソールに出力するとオブジェクトに含まれている情報が確認できます。

関数は以下のようなものがあります。
【指定したURLへ移動】
location.href | ページのURLを設定する |
location.assign(“url”) | 指定されたURLの割り当て(閲覧履歴追記あり) |
location.replace(“url”) | 指定したURLへ置換(閲覧履歴追記なし) |
location.reload(force) | ページを再読込(強制リロード) |
【URL情報を取得】
項目 | 説明 |
---|---|
location.origin | URL全体の文字列 |
location.hash | URLに含まれるハッシュ「#」部分(アンカー) |
location.host | ホスト名・ポート番号 |
location.hostname | ホスト名 |
location.port | ポート番号 |
location.pathname | URLのパス部分 |
location.protocol | プロトコル |
location.search | クエリ情報 |
location.href でURL全体を取得することができますが、URLの一部分だけを使用したい場合などは他のプロパティを使って一部分だけを取得することも可能です。
location.href
location.href
は表示するページのURLを指定するコードです。
例えば以下のコードをそのまま記述した場合、どのページにアクセスしても /new-page.html のページへ飛ばされます。
location.href = "./new-page.html";
そのまま使用するとアクセスするURLが変わってしまいますが、変数に入れてURL全体の文字列を取得する、といった使い方もできます。文字列だけを取得したい場合は location.origin
で代用できます。
const url = location.href;
console.log(url);
location オブジェクトを使用するときは、window オブジェクトをつけてもつけなくても以下の場合結果は同じです。(どちらも /new-page.html
に移動します)
location.href = "./new-page.html";
window.location.href = "./new-page.html";
location.hash
location.hash
はURLに含まれるハッシュ・アンカーを取得します。以下のURLなら「#hash
」の部分です。
https://example.com/#hash
location.host, location.hostname, location.port
location.host
はホスト名とポート番号を取得します。
例えば example.com:8080
といったアドレスの場合、「example.com
」がホスト名で「8080
」がポート番号です。
ホスト名だけ取得したい場合は location.hostname
、ポート番号だけなら location.port
を使用します。
ポート番号が省略されているURLの場合はポート番号は空になります(取得できない)。
location.pathname
location.pathname
はパス名を取得します。パス名はホストを除いた部分(ハッシュやクエリも含まれません)で、https://example.com/index.html
なら /index.html
、https://example.com/cat/index.html
なら /cat/index.html
がパス名になります。
location.protocol
location.protocol
はhttp や https といったURLのプロトコルを取得します。
プロトコルとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
location.search
location.search
はURLに含まれるパラメータ・クエリ文字列を取得します。パラメータ・クエリは以下のようなURLの「?」以降の部分です。
https://example.com/?a=answer&q=question
location.replace
location.replace
は、指定したURLへアクセスできます。
このメソッドを使用すると、history (閲覧履歴)に追加されません。例えばブラウザの「戻る」で前のページに戻ることができなくなります。
location.reload
location.reload
は表示されているページをリロードします。引数に true を渡すと強制リロード(ブラウザのキャッシュが無視)されます。
jQuery でのURL情報の取得
jQuery の場合は以下のようなコードでURL情報を取得することができます。プロパティは先述したものと同様のものが使えます。
$(location).attr('プロパティ');
カテゴリー : JavaScript