HTML5历史API回来的部分页面加载按钮(HTML5 History API back butto

为了提高我的网站的性能/响应我一直在使用AJAX，replaceState，pushState的，和popstate监听器实现局部页面加载。

我基本上是存储我的网页（HTML）的作为历史我的状态对象中的核心部分。当链接被点击我请求只是页面的中央位从服务器（识别与不同Accept报头这些请求），并用JavaScript替换它。在popstate我抢前面的中心部分，并将它推回DOM。

这主要工作得很好，但是我发现了一个特别的问题，我是卡上。这是一个有点复杂的解释，所以我道歉，如果这还不是很清楚。

有大多数我们的网页搜索表单。通过AJAX局部页面装载只在GET请求，并且形式执行POST，这导致一整页的负荷。

如果我浏览下面的一组页面，我最终只由上述中心内容格式不正确的部分页面上，没有任何周围的DOM的：

开始在主页上（通过全页面加载） - 执行一个搜索（重定向后得到）
带您到搜索结果（通过全页面加载） - 然后点击首页
返回到主页（通过动态GET） - 点击浏览器的后退
搜索结果（从popstate听众） - 点击浏览器的后退
畸形的主页。

当畸形主页出现后，我popstate监听器是不存在的。

我认为正在发生的事情，是首页的第二负载（动态，部分）是由浏览器缓存，然后当整个页面回时，浏览器只是显示缓存的局部反应，而不是整个页面。

为了尝试解决这个我添加了一个有所不同：接受头的响应，让浏览器知道的内容可基于在接受头。我还增加了高速缓存控制最大年龄= 0，编译无缓存，和过去的到期日，以部分加载的内容，试图迫使浏览器不缓存这一点，但是这一切都不解决它。

不幸的是我公司不允许外部流量到我们的开发服务器，所以我不能告诉你的问题。我已经看了看这里的各种类似的问题，但他们都不完全一样，也不建议的解决方案似乎工作。

如果我一个毫无意义的参数（废话=等等）添加到我的动态GET请求，这解决了这个问题。然而，这是一个丑陋的黑客，我宁愿不做。这似乎是它应该是可以解决的页眉，因为我认为这是一个缓存的问题。任何人能解释这是怎么回事？

Answer 1:

这是一个缓存的问题。随着响应头的Cache-Control设置为no-cache和max-age=0 ，问题并不在FF发生（如你所说），但它在Chrome仍然存在。

为我工作的头是缓存控制： no-store 。那不是一致通过的所有（你可以找到问题问的是什么无缓存，无店铺之间的差）的浏览器中实现，但你在Chrome预期以及结果。

Answer 2:

我有一个类似的问题。我建立一个基于Web的向导，并使用jquery Ajax加载的每一步（ASP.NET MVC在后端）。

该inital路线是一样的东西/问题/显示 - 它加载整个页面，并显示第一个问题（问题0）。当用户点击下一个图像，它确实一个jQuery .load（）的网址/问题/保存/ 0。这节省了答案，并返回下一个问题的局部视图。下一个保存做一个jQuery的.load（）与/问题/保存/ 1 ...

我实现History.js使用户可以回去和forward（向前？）。它存储的状态数据的问题编号。当它检测为stateChange（和国家的问题编号是从页面上有什么不同），但它确实一个jQuery .load（）加载正确的问题。

起初我是用在初始页面加载是同样的路线（/问题/显示/ X，其中X是个问题数）。在后端我检测它是否是一个Ajax请求，并且如果是这样返回的局部视图，而不是完整的视图。这就是问题来到你类似的：说我是在问题3，回去了，然后向前，然后去www.google.com，然后打的后退按钮。这表明问题3，但它是局部视图 - 因为浏览器缓存的部分用于这条路线。

我的解决办法是创建Ajax调用单独的路径：/问题/负载/ X（它使用在后端的通用代码）。现在有两种不同的路由（/问题/显示AJAX的非Ajax和/问题/加载），浏览器中正确显示在上述情况整个页面。

所以，也许类似的解决方案会为你工作...即你的主页两种不同的路线 - 一个完整的网页，另一个部分。希望帮助。