带有部分页面加载的HTML5 History API后退按钮

Rob*_*key 10 html5 browser-cache http-headers pushstate popstate

为了提高我网站的性能/响应能力,我使用AJAX,replaceState,pushState和popstate监听器实现了部分页面加载.

我基本上将页面的中心部分(HTML)存储为历史记录中的状态对象.单击链接时,我只从服务器请求页面的中心位(用不同的Accept标识标识这些请求)并用javascript替换它.在popstate上,我抓住前面的中央部分并将其推回到dom中.

这大部分工作正常,但我发现了一个我坚持的特殊问题.解释起来有点复杂,所以如果不是很清楚我会道歉.

我们的大部分页面都有一个搜索表单.通过ajax加载部分页面仅在GET请求上,并且表单执行POST,导致整页加载.

如果我浏览下面的一组页面,我最终会出现一个格式错误的部分页面,其中包含中心内容,而不包含任何周围的dom:

从主页开始(通过整页加载) - 执行搜索(重定向后)
获取搜索结果(通过整页加载) - 然后单击主页
返回主页(通过动态获取) - 单击浏览器返回
搜索结果(来自popstate listener) - 单击浏览器返回
格式错误的主页.

当出现格式错误的主页时,我的popstate监听器根本不存在.

认为正在发生的是,主页的第二次加载(动态,部分)被浏览器缓存,然后当整页回复发生时,浏览器只显示缓存的部分响应而不是整页.

为了解决这个问题,我在响应中添加了一个Vary:Accept标头,让浏览器知道内容可能会根据accept标头发生变化.我还为部分加载的内容添加了Cache-Control max-age = 0,pragma no-cache和过去的到期日期,以试图强制浏览器不缓存它,但这些都没有解决它.

不幸的是我的公司不允许我们的开发服务器的外部流量,所以我不能告诉你这个问题.我在这里看过各种类似的问题,但它们似乎都不一样,所提出的解决方案似乎也没有用.

如果我向动态GET请求添加一个无意义的参数(blah = blah),这就解决了这个问题.然而,这是一个丑陋的黑客,我宁愿不做.这似乎应该可以解决标题,因为我认为这是一个缓存问题.谁能解释一下发生了什么?

Mar*_*niz 9

这是一个缓存问题.将响应标头Cache-Control设置为no-cachemax-age=0,问题不会发生在FF中(正如您所说),但它仍然存在于Chrome中.

适用于我的标题是Cache-Control : no-store. 所有浏览器都没有始终如一地实现这一点(你可以找到问题,询问无缓存和无存储之间有什么区别),但是你也期望在Chrome中得到结果.