Location
Location
インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。 変更が行われると、関連するオブジェクトに反映されます。 Document
インターフェイスおよび Window
インターフェイスにはこのような関連付けられた Location
があり、それぞれ Document.location
および Window.location
でアクセスできます。
Location の解剖
HTML
<span id="href" title="href"><span id="origin" title="origin"><span id="protocol" title="protocol">https:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8080</span></span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
CSS
html, body { height: 100%; }
html { display: table; width: 100%; }
body { display: table-cell; text-align: center; vertical-align: middle; font-family: Georgia; font-size: 200%; line-height: 1em; white-space: nowrap; }
[title] { position: relative; display: inline-block; box-sizing: border-box; line-height: 2em; cursor: pointer; }
[title]:before { content: attr(title); font-family: monospace; position: absolute; top: 100%; width: 100%; left: 50%; margin-left: -50%; font-size: 40%; 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, .8); }
JavaScript
document.body.addEventListener('click', function (evt) {
evt.preventDefault();
window.location.hash = evt.target.hasAttribute('id')
? '#' + evt.target.getAttribute('id')
: '';
});
結果
プロパティ
Location.ancestorOrigins
-
静的な
DOMStringList
で、指定されたLocation
オブジェクトに関連付けられた文書の、すべての祖先の閲覧コンテキストを逆順に保持します。 Location.href
-
URL 全体を収めた
USVString
を返す文字列化です。この値を変更すると、関連付けられた文書が新しいページへ移動します。この値は、関連付けられた文書のものとは異なるオリジンから設定できます。 Location.protocol
-
末尾の
':'
を含む、URL のプロトコルスキームを収めたUSVString
です。 Location.host
-
URL のホスト (すなわちホスト名、
':'
、ポート番号) を収めたUSVString
です。 Location.hostname
-
URL のドメインを収めた
USVString
です。 Location.port
-
URL のポート番号を収めた
USVString
です。 Location.pathname
-
URL のパス部分を、先頭の
'/'
を含めて収めたUSVString
です。 Location.search
-
URL のうち、
'?'
とそれに続く引数や「クエリー文字列」を収めたUSVString
です。最近のブラウザーは、クエリー文字列からパラメーターを容易に解析するための URLSearchParams や URL.searchParams を提供しています。 Location.hash
-
URL のうち、
'#'
とそれに続くフラグメント識別子を収めたUSVString
です。 Location.origin
読取専用-
特定の位置のオリジンの正規形を収めた
USVString
です。
メソッド
Location.assign()
-
引数で指定した URL のリソースを読み込みます。
Location.reload()
-
現在の URL のリソースを再読み込みします。
Location.replace()
-
現在のリソースを、指定した URL のリソースで置き換えます。
assign()
メソッドとの違いは、replace()
を使用した後は現在のページがセッションのHistory
に保存されないことであり、ユーザーは戻るボタンを使用して移動することができません。 Location.toString()
-
URL 全体を収めた
USVString
を返します。これはLocation.href
と同義ですが、こちらは値を変更するために使用できません。
例
// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
var 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 つの手段:
Window.location
およびDocument.location
. - URL 関連のインターフェイス:
URL
,URLSearchParams
,HTMLHyperlinkElementUtils