| プロパティ | 内容 |
|---|---|
| href | 完全なURL |
| protocol | プロトコル スキーム (protocol scheme) |
| hostname | ホスト名 |
| port | ポート番号 |
| host | ホスト名とポート番号 |
| pathname | ホストからの相対パス |
| search | ?記号に続くURLの部分 (?も含む) |
| hash | #記号に続くURLの部分 (#も含む) |
たとえばドキュメントのURLがhttp://example.com:1234/index.html?a=1&b=2#fooとすると、プロパティは下表のように取得できます。
| プロパティ | 値 |
|---|---|
| href | http://example.com:1234/index.html?a=1&b=2#foo |
| protocol | http: |
| hostname | example.com |
| port | 1234 |
| host | example.com:1234 |
| pathname | /index.html |
| search | ?a=1&b=2 |
| hash | #foo |
| origin ※1 | http://example.com |
これらのプロパティのいずれかを変更すると、新しいURLが読み込まれます。
プロパティの変更により読み込まれたURLは、セッション履歴に記録されます。その変更がユーザーの操作に基づかない場合、ユーザーがブラウザの[戻る]ボタンを押したとき、期待するページに戻れない問題が発生します。このような場合にはプロパティを変更するのではなく、replace()を使用することで問題を回避できます。
hrefに相対パスを指定することで、現在のディレクトリを基準としたページへ移動できます。Redirecting to a relative URL in JavaScript - Stack Overflow
新しいURLの読み込みは前述のプロパティに設定することで行えますが、セッション履歴やキャッシュに配慮した特別な読み込みには、次のメソッドを用います。
| メソッド | 説明 |
|---|---|
| reload | 現在のドキュメントを再読み込み (reload) する。 |
| replace | ブラウザのセッション履歴に残らないように、新しいURLを読み込む。 |
現在のURLからリソースを再読み込みさせられます。これはブラウザを更新することに相当し、当然ブラウザのセッション履歴には残りません。
location.reload( force )Location.reload() - Web API Interfaces | MDN
forceでデータの読み込み元を指示します。
現在のページではなく、指定のページをキャッシュを無視して読み込みたいならば、また別の方法を用います。
下のリンクをクリックすることでreload()の動作を試行できます。そのときキャッシュから読み込んだことは、ブラウザの開発者ツールでステータスが304となっていることで確認できます。
location.replace( url )Location.replace() - Web API Interfaces | MDN
現在のドキュメントを、urlで指定されたドキュメントで置き換えます。これはページの遷移ではないためセッション履歴に残らず、置き換え後のドキュメントから履歴を戻ると、現在のドキュメントの直前のページへ戻ります。
下のリンクをクリックすると、このドキュメントが置き換えられます。そしてブラウザの履歴から戻ることで、replace()の動作を試行できます。
Locationオブジェクトのイベントではありませんが、Windowのhashchangeイベントを捕捉することで、hashプロパティの変更を知ることができます。 WindowEventHandlers.onhashchange - Web APIs | MDN hashchange - Event reference | MDN