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

Question

我有一个页面,其中有几个搜索/过滤按钮,当点击时,通过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"
• 他们再次单击Back,将它们发送回"A"
• 此时,如果他们按下Forward,而不是再次向服务器请求Page"B",浏览器只显示一堆JSON代码作为页面内容(这个JSOn是我的一个AJAX请求的响应)过滤东西)

至少在最新的Chrome中

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

Answer 1

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

Answer 2

有一个缓存选项$.ajax：

$.ajax({ cache: false, url: newURL})

见http://api.jquery.com/jquery.ajax/