JavaScript の【location】オブジェクト | URL情報を取得・読み込み

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.originURL全体の文字列
location.hashURLに含まれるハッシュ「#」部分(アンカー)
location.hostホスト名・ポート番号
location.hostnameホスト名
location.portポート番号
location.pathnameURLのパス部分
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.htmlhttps://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

TOPへ