web-dev-qa-db-ja.com

ブラウザの履歴を変更せずにURLを変更する方法

今まで、ページ全体をリロードせずにURLを変更する場合は、HTMLブラウザー history APIを使用する必要があることしかわかりません。

私は自分のウェブサイトでこの概念を使用しています。例を見てみましょう。ユーザーがこのページにいるとします

 https://www.example.com/aboutus

そして、彼はフィルターがある製品リストに行きます。フィルターシステムをクリックすると、このような新しいURLが生成されます

https://www.example.com/products?brands[]=song&brands[]=samsung&condition[]=new

内部的には単に呼び出している

history.pushState({}, 'Title', link.href);

しかし、問題が1つあります。 backボタンをクリックすると、前のフィルターが使用されます。 この機能は必要ありません。ブラウザの戻るボタンをクリックすると、currentページの前のページに移動するはずです。私たちの場合、それは

https://www.example.com/aboutus

ありがとう。

javascripthtml5browser-history
41
Paritosh Piplewar

replaceState()を探している場合、pushState()のように新しい位置をプッシュするのではなく、履歴内の現在の位置を置き換えます

from [〜＃〜] mdn [〜＃〜]

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

replaceState()は、ユーザーのアクションに応じて、現在の履歴エントリの状態オブジェクトまたはURLを更新する場合に特に役立ちます。

一部の機能は古いブラウザでは利用できません を忘れないでください。しかし、あなたを助けることができる library があります。

76
adeneo