我有一个页面,其中有几个搜索/过滤按钮,当点击时,通过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转储.