更改 url 中的哈希值时，在浏览器返回单击时刷新浏览器页面答案

【问题标题】：Refresh browser page on browser back click when changing hash value in url更改 url 中的哈希值时，在浏览器返回单击时刷新浏览器页面
【发布时间】：2016-03-01 13:53:30
【问题描述】：

我有一个带有过滤器的网站。每当应用任何过滤器时，我都会附加哈希。例如我有城市，滤色器。

网址/#color=red&city=德里

现在当有人在此类 url 上点击浏览器时，它变为 URL/#color=red。城市查询字符串被浏览器删除。

问题是页面不会自行重新加载。

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

但这是无限加载页面。

【问题讨论】：

为什么不使用查询字符串? 而不是页面锚# 进行过滤？
没有。其现有代码。这将是一个很大的变化。我做不到。
很遗憾，您的 HTML 无效，需要修复。

标签： javascript jquery hashchange

【解决方案1】：

尝试历史 API https://developer.mozilla.org/en-US/docs/Web/API/History_API

例如

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

【讨论】：

【解决方案2】：

尝试关闭缓存，这样当你返回时，浏览器会自动从服务器获取一个新页面...

更多信息here...

【讨论】：

【解决方案3】：

您可能不想听到这个，但您拥有的 HTML 无效，需要通过将锚点 # 转换为正确的查询字符串 ? 来修复。这将允许浏览器返回并重新加载页面。

您可以在 HTML 编辑器中使用查找和替换来完成此操作。

如果这会给您实现过滤器的方式带来问题，您需要更新过滤代码。如果您在此处发布，我们可以帮助解决此问题。

希望对您有所帮助。 :-)

【讨论】：

我已经完成了。静止页面没有在浏览器上重新加载。