web-dev-qa-db-ja.com

ハッシュやページの再読み込みをせずに新しいURLでアドレスバーを更新する

私は、ページをリロードせずにjavascript(パスではなくパス)を介してアドレスバーを更新する方法を実装するchrome(dev channel)を夢見ていたか、実際にこれを行っています。

しかし、私が読んだ記事Ithinkが見つかりません。

私は夢中ですか、それとも(Chromeで)これを行う方法はありますか?

pS私はwindow.location.hashなどについて話していません。上記が存在する場合 この質問に対する答え は正しくありません。

586
David Murdoch

これで、ほとんどの "現代"ブラウザでこれが可能になります。

これは私が読んだオリジナルの記事です(2010年7月10日投稿): HTML5:ページを更新せずにブラウザのURLを変更する

PushState/replaceState/popstate(別名HTML5 History API)の詳細については、 MDNのドキュメントを参照してください

TL; DR、これができます:

window.history.pushState("object or string", "Title", "/new-url");

ページをリロードせずにURLを変更する への私の答えを参照してください - /基本的な使い方については/。

806
David Murdoch

ハッシュの後のものだけを変更する - 古いブラウザ

document.location.hash = 'lookAtMeNow';

フルURLを変更しています。 Chrome、Firefox、IE 10+

history.pushState('data to be passed', 'Title of the page', '/test');

上記は履歴に新しいエントリを追加するので、前の状態に戻るには戻るボタンを押します。履歴に新しいエントリを追加せずにその場でURLを変更するには

history.replaceState('data to be passed', 'Title of the page', '/test');

今すぐコンソールでこれらを実行してみてください。

131
Pawel

ブラウザを検出するためのDavids回答への更新はpushstateをサポートしていません:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
23
metamagikum