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 のうち、
'?'
とそれに続く引数や「クエリー文字列」を収めた文字列です。最近のブラウザーは、クエリー文字列から引数を容易に解析するための URLSearchParams や URL.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
関連情報
- 2 つの
Location
のプロパティ:Window.location
およびDocument.location
. - URL を操作するインターフェイス:
URL
,URLSearchParams