带有部分页面加载的HTML5 History API后退按钮 [英] HTML5 History API back button with partial page loads

问题描述

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

To improve the performance/responsiveness of my website I have implemented a partial page load using AJAX, replaceState, pushState, and a popstate listener.

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

I essentially store the central part of my page (HTML) as my state object in the history. When a link is clicked I request just the central bit of the page from the server (identifying these requests with a different Accept header) and replace it with javascript. On popstate I grab the previous central part and push it back into the dom.

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

This mostly works fine, however I have found a particular issue which I am stuck on. It is a little complicated to explain, so my apologies if this isn't very clear.

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

There is a search form on most of our pages. The partial page loading via ajax is only on GET requests, and the form performs a POST which results in a full page load.

如果我浏览以下页面集，我最终出现了一个格式错误的部分页面，其中包含仅中心内容，没有任何周围的dom：

If I navigate the following set of pages, I end up on a malformed partial page consisting of ONLY the central content, without any of the surrounding dom:

在主页上开始（通过整页加载） - 执行搜索（重定向后获取）

转到搜索结果（通过整页加载） - 然后单击主页

返回主页页面（通过动态获取） - 点击浏览器返回

搜索结果（来自popstate监听器） - 点击浏览器返回

格式错误的主页。

Start on the Home Page (via full page load) - perform a Search (post-redirect-get)
Takes you to Search Results (via full page load) - then click Home
Returns you to the Home Page (via dynamic get) - click browser back
Search Results (from popstate listener) - click browser back
Malformed home page.

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

When the malformed home page appears, my popstate listener is not present at all.

我认为正在发生的事情，是浏览器正在缓存主页的第二个加载（动态，部分），然后当完整页面返回时，浏览器仅显示缓存的部分回复而不是整页。

What I think is happening, is that the second load (dynamic, partial) of the home page is being cached by the browser, and then when the full page back occurs, the browser is merely showing the cached partial response rather than the full page.

为了解决这个问题，我在响应中添加了一个Vary：Accept标头，让浏览器知道内容可能会因此而改变接受标题。我还为部分加载的内容添加了Cache-Control max-age = 0，pragma no-cache和过去的到期日期，试图强制浏览器不缓存它，但是没有一个能解决它。

To try to remedy this I have added a Vary: Accept header to the response to let the browsers know that content may change based on the accept header. I have also added Cache-Control max-age=0, pragma no-cache, and a past expiry date to the partial loaded content to try to force the browser not to cache this, but none of this solves it.

不幸的是，我的公司不允许外部流量到我们的开发服务器，因此我无法向您显示问题。我在这里看过各种类似的问题，但它们似乎都没有相同，建议的解决方案似乎也不起作用。

Unfortunately my company does not allow external traffic to our dev servers, so I cannot show you the problem. I have looked at various similar questions on here, but none of them seem quite the same, nor do the solutions suggested seem to work.

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

If I add a pointless parameter (blah=blah) to my dynamic GET requests, this solves the problem. However this is an ugly hack that I'd rather not do. This seems like it should be solvable with headers, since I think it is a caching problem. Can anyone explain what's going on?

推荐答案

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

That's a caching issue. With the response header Cache-Control set to no-cache or max-age=0, the problem doesn't happen in FF (as you said), but it persists in Chrome.

对我有用的标题是Cache-Control： no-store 。所有浏览器都没有始终如一地实现这一点（您可以找到问题，询问无缓存和无存储之间的区别），但是您也可以在Chrome中获得结果。

The header that worked for me is Cache-Control: no-store. That's not consistently implemented by all the browsers (you can find questions asking what is the difference between no-cache and no-store), but has the result you expect in Chrome as well.

这篇关于带有部分页面加载的HTML5 History API后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！