HTML5 History API : JSON displayed when going "back" to another page, 然后又是 "forward"

Question

我有一个页面，其中有几个搜索/过滤按钮，单击这些按钮时，会通过 AJAX 刷新下面列表的内容。

在此过程中，我正在修改历史记录(通过 pushstate)，以便新过滤的页面可以添加书签，这样后退按钮就可以使用了。我也在监听 popstate 事件，以对返回使用react。

我的代码大致是这样的:

window.addEventListener("popstate", function(ev) {
  if (!window.history_ready) { return; } // Avoid the one time it runs on load 
  refreshFilter(window.location.href, true);
});

refreshFilter: function(newURL, backButtonPressed){
  $.ajax({ url: newURL}).done( blah );

  if (!backButtonPressed) {
    window.history_ready = true;
    history.pushState(null, null, newURL);
  }
}

除了一个奇怪的情况外，这非常有效......

• 用户在页面“A”中
• 他们点击一个链接转到这个播放历史的页面(我们称之为“B”)
• 他们运行了几个过滤器，然后按了几次“返回”，所以他们回到了“B”的初始状态
• 他们再次点击“返回”，返回“A”
• 此时，如果他们按下转发，浏览器不会再次向服务器请求页面“B”，而是简单地显示一堆 JSON 代码作为页面内容(这个 JSON 是我的一个响应AJAX 请求过滤内容)

至少在最新的 Chrome 中是这样

为什么会发生这种情况，我该如何避免？

Answer 1

Chrome 会缓存您访问的页面，当您返回或前进时，它会使用缓存快速显示页面。如果您用于通过 AJAX 从服务器检索 JSON 的 URL 与 Chrome 会命中的 URL 相同，那么 Chrome 可能会从缓存中选择该页面，而不是漂亮的 HTML，而只是一个 JSON 转储。