Location

Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。変更が行われると、関連するオブジェクトに反映されます。 Document および Window インターフェイスにはこのような関連付けられた Location があり、それぞれ Document.location および Window.location でアクセスできます。

Location の解剖

下記 URL の各部分にポインターを当てると、その意味が強調されます。

インスタンスプロパティ

Location.ancestorOrigins

静的な DOMStringList で、指定された Location オブジェクトに関連付けられた文書の、すべての祖先の閲覧コンテキストを逆順に保持します。

Location.href

URL 全体を収めた文字列を返す文字列化です。この値を変更すると、関連付けられた文書が新しいページへ移動します。この値は、関連付けられた文書のものとは異なるオリジンから設定できます。

Location.protocol

末尾の ':' を含む、URL のプロトコルスキームを収めた文字列です。

Location.host

URL のホスト (すなわちホスト名':'ポート番号) を収めた文字列です。

Location.hostname

URL のドメインを収めた文字列です。

Location.port

URL のポート番号を収めた文字列です。

Location.pathname

URL のパス部分で、先頭の '/' に続いて URL のパス部分が入ったもので、クエリー文字列やフラグメントを含めない文字列です。

Location.search

URL のうち、 '?' とそれに続く引数や「クエリー文字列」を収めた文字列です。最近のブラウザーは、クエリー文字列から引数を容易に解析するための URLSearchParamsURL.searchParams を提供しています。

Location.hash

URL のうち、 '#' とそれに続くフラグメント識別子を収めた文字列です。

Location.origin 読取専用

特定の位置のオリジンの正規形を収めた文字列です。

インスタンスメソッド

Location.assign()

引数で指定した URL のリソースを読み込みます。

Location.reload()

現在の URL のリソースを再読み込みします。

Location.replace()

現在のリソースを、指定した URL のリソースで置き換えます。 assign() メソッドとの違いは、replace() を使用した後は現在のページがセッションの History に保存されないことであり、ユーザーは戻るボタンを使用して移動することができません。

Location.toString()

URL 全体を収めた文字列を返します。これは Location.href と同義ですが、こちらは値を変更するために使用できません。

js
// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
const loc = document.location;
console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(loc.protocol); // https:
console.log(loc.host); // developer.mozilla.org:8080
console.log(loc.hostname); // developer.mozilla.org
console.log(loc.port); // 8080
console.log(loc.pathname); // /en-US/search
console.log(loc.search); // ?q=URL
console.log(loc.hash); // #search-results-close-container
console.log(loc.origin); // https://developer.mozilla.org:8080

location.assign("http://another.site"); // load another page

仕様書

Specification
HTML Standard
# the-location-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報