更改url中的哈希值时，刷新浏览器上的浏览器后单击

Question

I have a website with filters. I have appended hash whenever any filter is applied. For example i have city, color filter.

URL/#color=red&city=Delhi

Now when someone clicks browser back on such url, it becomes URL/#color=red. The city query string is removed by browser.

The problem is the page doesn't reload itself.

$(window).on('hashchange', function () {
    window.location.reload(true);
});

But this is infinitely loading the page.

Answer 1

Try history API https://developer.mozilla.org/en-US/docs/Web/API/History_API

eg

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Answer 2

Try turning off caching so that when you go back, the browser will automatically obtain a new page from the server...

More information here ...

Answer 3

You may not want to hear this, but the HTML you have is not valid and needs to be fixed by converting the anchors # to proper query strings ? . This will allow the browser to go back and reload the page.

You can do this using a find and replace in your HTML editor.

If that's going to cause problems to the way you've implemented your filters, you'll need to update your filtering code. If you post that here we can help fix that.

Hope that helps. :-)