web-dev-qa-db-ja.com

ページを更新せずにURLを変更する

ページを更新せずにURLを置き換えたい。

変更する必要があります：

https://example.com/en/step1

に

https://example.com/en/step2

どうやってするか ？

javascripthtml5-history
49
user5878353

更新

ブラウザの履歴の操作 に基づいて、空の文字列をpushStateメソッドの2番目のパラメータとして渡す（aka title）は将来の変更に対して安全である必要がありますメソッドに対しては、次のようにpushStateを使用することをお勧めします。

history.pushState(null, '', '/en/step2');

言及された記事でそれについてもっと読むことができます

元の回答

次のようにhistory.pushStateを使用します。

history.pushState(null, null, '/en/step2');

2を更新して回答Idan Daganのコメント：

history.replaceState()を使用しない理由

From MDN

history.replaceState（）は、replaceState（）が新しい履歴エントリを作成する代わりに現在の履歴エントリを変更することを除いて、history.pushState（）とまったく同じように動作します。

つまり、replaceStateを使用すると、はい、URLは変更されますが、ユーザーはブラウザーの[戻る]ボタンを使用して前のページに戻ることはできません。状態はもう（replaceStateは履歴に新しいエントリを追加しないため）、推奨されておらず、悪いUXを提供するためです。

3を更新して追加window.onpopstate

したがって、この答えが注目されたので、ブラウザ履歴の操作に関する追加情報があります。pushStateを使用した後、次のようにwindow.onpopstateを使用して戻る/進むボタンナビゲーションを検出できます。

window.onpopstate = function(e) {
    // ... 
};

pushStateの最初の引数はオブジェクトなので、objectの代わりにnullを渡した場合、onpopstateでそのオブジェクトにアクセスできます。これは非常に便利です。 ：

window.onpopstate = function(e) {
    if(e.state) {
        console.log(e.state);
    }
};

4を更新して追加 現在の状態の読み取り ：

ページが読み込まれると、null以外の状態オブジェクトが含まれる場合があります。次のようにhistory.stateプロパティを使用して、popstateイベントを待たずに現在の履歴エントリの状態を読み取ることができます。

console.log(history.state);

ボーナス：以下を使用して、history.pushStateサポートを確認します。

if (history.pushState) {
  // \o/
}
86
Mehdi Dehghani

関数を使用すると...

<p onclick="update_url('/en/step2');">Link</p>

<script>
function update_url(url) {
    history.pushState(null, null, url);
}
</script>
9
Christian Volquardsen