JavaScriptで現在ページのURLなどの情報を調べる方法

現在のページのURLやホスト名、ポート番号、URL末尾のクエリを取得したい・・・

そんな場合に便利なのがLocationオブジェクトにアクセスすることです。

ここではLocationを使って現在ページの情報を調べるテクニックを解説します。

現在ページのURLにアクセスするには

Locationオブジェクトはページに関する情報をまとめて保持しているオブジェクトです。

実際のコード内では window.location  というオブジェクトからアクセスができます。

 

そしてその一番基本的な使い方はページのURLを取得すること

例えば次が現在ページのURLを取得してコンソールに表示しているコード例

上コードのように window.location.href  とすればURL全体にアクセスできます。

 

返されるURL例ですが www.google.com  で開発者ツールを使って実行すると次のように表示されました。

ブラウザのアドレス欄に表示されている形式そのもので返ってくるようです。

 

以上がLocationオブジェクトの基本的な使い方

ですがこれを活用すればURL以外にもページに関して色々な情報を取得できます。

LocationからURL以外に取得できる情報

Locationオブジェクトでページ情報を調べるには次のプロパティも便利です。

  • protocol
  • host
  • hostname
  • port
  • pathname
  • search
  • hash

これらの返り値の例や使い方については次の通り

window.location.protocol

これは文字通り、現在ページでどのプロトコルを使っているか返すプロパティ

プロトコルは http とか https とか ftp とかのURLの最初につくアレです。

 

以下は具体的なURLとそれに対応する window.location.protocol  の返り値の例

URL例1 : https://www.example.com/
protocolの返り値 : https:
URL例2 : ftp://www.example.com
protocolの返り値 : ftp:
URL例3 : file:///C:/Program%20Files/
protocolの返り値 : file:

これらの例を見てもらえば分かるように末尾にセミコロン ( :  ) が付くことに注意です。

 

なのでもし純粋なプロトコル名だけ取得したいなら次のようなコードを書けばOK

上のコードではsliceメソッドを使って最後の1文字つまりセミコロンだけ取り除いています。

window.location.host

これはポート番号を含むホスト名を返すプロパティ

ちなみにポート番号はプロトコルに対応していてhttpの場合は80になります。

プロトコルとポート番号の関係については次のURLを参照

www.kandk.co.jp
 
URL
http://www.kandk.co.jp/html-memo/HTML/url.html

 

以下具体的なURLとそれに対応する host  の値の例

URL例1 : https://www.example.com/
hostの返り値 : www.example.com
URL例2 : https://www.example.com:80/
hostの返り値 : www.example.com
URL例3 : https://www.example.com:21/
hostの返り値 : www.example.com:21

URL例2を見てもらえれば分かるように80番ポートの場合はポート番号は省略されます。

それ以外は www.example.com:21  のように最後にポート番号付きのホスト名が返されるはずです。

hostname

これはポート番号を含まない純粋なホスト名を返すプロパティ

以下具体的なURL例とそれに対応する hostname  が返す値の例

URL例1 : https://www.hoge.com/
hotonameの値 : www.hoge.com
URL例2 : https://www.piyo.co.jp/
hostnameの値 : www.piyo.co.jp

これについては本当にホスト名を返すだけなので特に注意点とかはないですね。

window.location.port

現在ページで使われているポート番号を返すプロパティ

以下いくつかのURLとそれに対応する port  の値の例

URL例1 : https://www.example.com:80/
portの返す値 : 80
URL例2 : https://www.example.com:21/
portの返す値 : 21

単純にポート番号だけを返してきます。

window.location.pathname

これはホスト名以下のパス部分を先頭のスラッシュ( / )を含めて返すプロパティ

コードによっては先頭にスラッシュが含まれることに注意が必要かもしれません。

 

以下具体的なURLと対応する pathname  の値の例

URL例1 : https://www.example.com/wp-admin/
pathnameの返す値 : /wp-admin/
URL例2 : https://www.example.com/sub/index.html
pathnameの返す値 : /sub/index.html

ドメインを含まないので相対的なパスを扱う時とかに便利そうです。

window.location.search

URLのクエリパラメーターを返すプロパティ

クエリとはURL末尾につく「?q=」などの「?」以降の部分のこと

これは1つとは限らず「?q=xxx&s=yyy」のように&でつなげて複数指定可能です。

 

以下いくつかのURLとそれに対応する search  の返す値の例

URL例1 : https://www.google.com/?q=javascript
searchの返す値 : ?q=javascript
URL例2 : https://www.hoge.com/?x=fuga&y=piyo/
searchの返す値 : ?x=fuga&y=piyo/

URL例2のように末尾がスラッシュ ( /  ) で終わる場合、それも含まれる点に注意が必要かもしれません。

window.location.hash

URLについたアンカーを返すプロパティ

アンカーというのは #xxx  のようにページ内リンクに使われるアレのことです。

 

以下具体的なURLとそれに対応する hash  が返す値の例

URL例 : https://www.example.com/#hogehoge
hashの返す値 : #hogehoge

このように純粋なアンカー名ではなく、 #  を含めた値が返ってきます。

ここまでのまとめ

もし現在ページで例えば次のような情報

  • 全体のURL
  • ホスト名やポート番号
  • ホスト以下のパス
  • クエリやアンカー

などを調べたい場合は window.lcoation  を使うのが便利だと思います。

あとJS側で動的にページをリダイレクトする場合とかにも役立つかもしれませんね。

 

以上JavaScriptで現在ページの情報を調べる方法についてでした。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください