Location

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

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

Location の解剖

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

<span title="href"  ><span title="origin"    ><span title="protocol">https:</span>//<span           title="host"      ><span title="hostname">example.org</span>:<span               title="port"        >8080</span      ></span    ></span  ><span title="pathname">/foo/bar</span  ><span title="search">?q=baz</span  ><span title="hash">#bang</span></span>

html {  display: table;  width: 100%;}body {  display: table-cell;  text-align: center;  vertical-align: middle;  font-family: Georgia;  font-size: 175%;  line-height: 1em;  white-space: nowrap;}[title] {  position: relative;  display: inline-block;  box-sizing: border-box;  line-height: 2em;  cursor: pointer;  color: gray;}[title]::before {  content: attr(title);  font-family: monospace;  position: absolute;  top: 100%;  width: 100%;  left: 50%;  margin-left: -50%;  font-size: 60%;  line-height: 1.5;  background: black;}[title]:hover::before,:target::before {  background: black;  color: yellow;}[title] [title]::before {  margin-top: 1.5em;}[title] [title] [title]::before {  margin-top: 3em;}[title] [title] [title] [title]::before {  margin-top: 4.5em;}[title]:hover,:target {  position: relative;  z-index: 1;  outline: 50em solid rgba(255, 255, 255, 0.8);}

document.body.addEventListener("click", (event) => {  event.preventDefault();  window.location.hash = event.target.hasAttribute("id")    ? `#${event.target.getAttribute("id")}`    : "";});

インスタンスプロパティ

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 と同義ですが、こちらは値を変更するために使用できません。

例

// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-containerconst loc = document.location;console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-containerconsole.log(loc.protocol); // https:console.log(loc.host); // developer.mozilla.org:8080console.log(loc.hostname); // developer.mozilla.orgconsole.log(loc.port); // 8080console.log(loc.pathname); // /en-US/searchconsole.log(loc.search); // ?q=URLconsole.log(loc.hash); // #search-results-close-containerconsole.log(loc.origin); // https://developer.mozilla.org:8080location.assign("http://another.site"); // load another page