Locationオブジェクト

プロパティ

プロパティ 内容
href 完全なURL
protocol プロトコル スキーム (protocol scheme)
hostname ホスト名
port ポート番号
host ホスト名とポート番号
pathname ホストからの相対パス
search ?記号に続くURLの部分 (?も含む)
hash #記号に続くURLの部分 (#も含む)

実行例

たとえばドキュメントのURLhttp://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
※1 Firefox 21以降、Chrome 30以降のみでサポート

これらのプロパティのいずれかを変更すると、新しいURLが読み込まれます

プロパティの変更により読み込まれたURLは、セッション履歴に記録されます。その変更がユーザーの操作に基づかない場合、ユーザーがブラウザの[戻る]ボタンを押したとき、期待するページに戻れない問題が発生します。このような場合にはプロパティを変更するのではなく、replace()を使用することで問題を回避できます。

相対パス

hrefに相対パスを指定することで、現在のディレクトリを基準としたページへ移動できます。Redirecting to a relative URL in JavaScript - Stack Overflow

現在のディレクトリ:

メソッド

新しいURLの読み込みは前述のプロパティに設定することで行えますが、セッション履歴やキャッシュに配慮した特別な読み込みには、次のメソッドを用います。

メソッド 説明
reload 現在のドキュメントを再読み込み (reload) する。
replace ブラウザのセッション履歴に残らないように、新しいURLを読み込む。

reload

現在のURLからリソースを再読み込みさせられます。これはブラウザを更新することに相当し、当然ブラウザのセッション履歴には残りません。

location.reload( force )
Location.reload() - Web API Interfaces | MDN

forceでデータの読み込み元を指示します。

  • false または 省略 … ブラウザのキャッシュから読み込む (通常の再読み込み)
  • true … サーバから読み込む (キャッシュを無視した再読み込み)

現在のページではなく、指定のページをキャッシュを無視して読み込みたいならば、また別の方法を用います。

下のリンクをクリックすることでreload()の動作を試行できます。そのときキャッシュから読み込んだことは、ブラウザの開発者ツールステータスが304となっていることで確認できます。

replace

location.replace( url )
Location.replace() - Web API Interfaces | MDN

現在のドキュメントを、urlで指定されたドキュメントで置き換えます。これはページの遷移ではないためセッション履歴に残らず、置き換え後のドキュメントから履歴を戻ると、現在のドキュメントの直前のページへ戻ります。

下のリンクをクリックすると、このドキュメントが置き換えられます。そしてブラウザの履歴から戻ることで、replace()の動作を試行できます。

イベント

Locationオブジェクトのイベントではありませんが、Windowのhashchangeイベントを捕捉することで、hashプロパティの変更を知ることができます。 WindowEventHandlers.onhashchange - Web APIs | MDN hashchange - Event reference | MDN

JavaScriptのドキュメントから検索