HTML5历史记录API：当“返回”到另一个页面时显示JSON,然后再次“转发”

我有一个页面,其中有几个搜索/过滤按钮,当点击时,通过AJAX刷新下面列表的内容.

在这个过程中,我正在修改历史记录(通过pushstate),以便新的过滤页面可以加入书签,因此后退按钮可以正常工作.我也在听popstate事件,对Back做出反应.

我的代码看起来或多或少像这样：

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”
>此时,如果他们按下Forward,而不是再次向服务器请求Page“B”,浏览器只显示一堆JSON代码作为页面内容(此JSOn是我的一个AJAX请求的响应)过滤东西)

至少在最新的Chrome中

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

解决方法

Chrome会缓存您访问的页面,当您返回或转发时,它会使用缓存快速显示页面.如果您用来通过AJAX从服务器检索JSON的URL与Chrome会遇到的URL相同,那么Chrome可能会从缓存中选择该页面,而不是好的HTML,它只是一个JSON转储.