我有一个页面,其中有几个搜索/过滤按钮,单击这些按钮时,会通过 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”
- 此时,如果他们按“前进”,浏览器不会再次向服务器发出页面“B”的请求,而是简单地显示一堆 JSON 代码作为页面内容(这个 JSOn 是我的一个 AJAX 请求的响应)过滤东西)
至少在最新的 Chrome 中
为什么会发生这种情况以及如何避免这种情况?
Chrome 会缓存您访问的页面,当您后退或前进时,它会使用缓存快速显示页面。如果您用于通过 AJAX 从服务器检索 JSON 的 URL 与 Chrome 会命中的 URL 相同,那么 Chrome 可能会从缓存中选择该页面,该页面不是漂亮的 HTML,而只是 JSON 转储。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)