現在のページのURLやホスト名、ポート番号、URL末尾のクエリを取得したい・・・
そんな場合に便利なのがLocationオブジェクトにアクセスすることです。
ここではLocationを使って現在ページの情報を調べるテクニックを解説します。
このページの目次
現在ページのURLにアクセスするには
Locationオブジェクトはページに関する情報をまとめて保持しているオブジェクトです。
実際のコード内では window.location というオブジェクトからアクセスができます。
そしてその一番基本的な使い方はページのURLを取得すること
例えば次が現在ページのURLを取得してコンソールに表示しているコード例
|
1 2 |
var currentURL = window.location.href; console.log(currentURL); |
上コードのように window.location.href とすればURL全体にアクセスできます。
返されるURL例ですが www.google.com で開発者ツールを使って実行すると次のように表示されました。
|
1 |
https://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 の返り値の例
protocolの返り値 : https:
protocolの返り値 : ftp:
protocolの返り値 : file:
これらの例を見てもらえば分かるように末尾にセミコロン ( : ) が付くことに注意です。
なのでもし純粋なプロトコル名だけ取得したいなら次のようなコードを書けばOK
|
1 |
var protocol = window.location.protocol.slice(0, -1); |
上のコードではsliceメソッドを使って最後の１文字つまりセミコロンだけ取り除いています。
window.location.host
これはポート番号を含むホスト名を返すプロパティ
ちなみにポート番号はプロトコルに対応していてhttpの場合は80になります。
プロトコルとポート番号の関係については次のURLを参照
以下具体的なURLとそれに対応する host の値の例
hostの返り値 : www.example.com
hostの返り値 : www.example.com
hostの返り値 : www.example.com:21
URL例２を見てもらえれば分かるように80番ポートの場合はポート番号は省略されます。
それ以外は www.example.com:21 のように最後にポート番号付きのホスト名が返されるはずです。
hostname
これはポート番号を含まない純粋なホスト名を返すプロパティ
以下具体的なURL例とそれに対応する hostname が返す値の例
hotonameの値 : www.hoge.com
hostnameの値 : www.piyo.co.jp
これについては本当にホスト名を返すだけなので特に注意点とかはないですね。
window.location.port
現在ページで使われているポート番号を返すプロパティ
以下いくつかのURLとそれに対応する port の値の例
portの返す値 : 80
portの返す値 : 21
単純にポート番号だけを返してきます。
window.location.pathname
これはホスト名以下のパス部分を先頭のスラッシュ（ / ）を含めて返すプロパティ
コードによっては先頭にスラッシュが含まれることに注意が必要かもしれません。
以下具体的なURLと対応する pathname の値の例
pathnameの返す値 : /wp-admin/
pathnameの返す値 : /sub/index.html
ドメインを含まないので相対的なパスを扱う時とかに便利そうです。
window.location.search
URLのクエリパラメーターを返すプロパティ
クエリとはURL末尾につく「?q=」などの「?」以降の部分のこと
これは１つとは限らず「?q=xxx&s=yyy」のように&でつなげて複数指定可能です。
以下いくつかのURLとそれに対応する search の返す値の例
searchの返す値 : ?q=javascript
searchの返す値 : ?x=fuga&y=piyo/
URL例２のように末尾がスラッシュ ( / ) で終わる場合、それも含まれる点に注意が必要かもしれません。
window.location.hash
URLについたアンカーを返すプロパティ
アンカーというのは #xxx のようにページ内リンクに使われるアレのことです。
以下具体的なURLとそれに対応する hash が返す値の例
hashの返す値 : #hogehoge
このように純粋なアンカー名ではなく、 # を含めた値が返ってきます。
ここまでのまとめ
もし現在ページで例えば次のような情報
- 全体のURL
- ホスト名やポート番号
- ホスト以下のパス
- クエリやアンカー
などを調べたい場合は window.lcoation を使うのが便利だと思います。
あとJS側で動的にページをリダイレクトする場合とかにも役立つかもしれませんね。
以上JavaScriptで現在ページの情報を調べる方法についてでした。
ではでは($・・)/~~~
