JS 表示してるページのURLを取得したりするアレコレのメモ

URLを取得する方法のメモ (※ Chrome / Firefox / Safari で確認しています。)

例えばこんなURL

1. http://example.com/dir/
2. http://www.example.com/dir/
3. http://example.com/dir/index.html#section01
4. http://www.example.com/dir/index.html#section01
5. http://example.com/dir/index.html?s=foo
6. http://www.example.com/dir/index.html?s=foo

今のページのURLを取得する

window.location.href

又は

document.URL // 読み取り専用

👇

// 1. => "http://example.com/dir/"
// 2. => "http://www.example.com/dir/"
// 3. => "http://example.com/dir/index.html#section01"
// 4. => "http://www.example.com/dir/index.html#section01"
// 5. => "http://example.com/dir/index.html?s=foo"
// 6. => "http://www.example.com/dir/index.html?s=foo"

ドメイン名を取得

window.location.host
// 又は window.location.hostname

👇

// 1. 3. 5. => "example.com"
// 2. 4. 6. => "www.example.com"

プロトコルを取得

window.location.protocol

👇 1 ~ 4 共通

// "http"

サイトのトップページのURLを取得

プロトコルとドメイン名から作成できる。

window.location.protocol + '//' + window.location.host

👇

// 1. 3. 5. => "http://example.com"
// 2. 4. 6. => "http://www.example.com"

ドメイン以下のパス

window.location.pathname

👇

// 1. 2. => "/dir/"
// 3. 4. 5. 6. => "/dir/index.html"

※ URLの末に/が無ければ無いまま取得されるっぽい

トップページ(http://example.com)の場合は/が取得される

window.location.pathname // => "/"

ハッシュを取得

window.location.hash

👇

// 1. 2. 5. 6. => ""
// 3. 4. => "#section01"

パラメーターを取得

window.location.search

👇

// 1. 2. 3. 4. => ""
// 5. 6. => "?s=foo"

※ ブラウザの場合locationはwindowオブジェクトのプロパティなので、wondow.は省略可 (但しスコープ内にlocationって名前の変数を作っていない場合)

---

[参考]

• Document.URL - Web API インターフェイス | MDN
• Location - Web API インターフェイス | MDN
• jQueryでのやりかた jQueryでURLを取得（ホストやパラメータなどの部分取得も）

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)