Ajax、后退按钮和DOM更新

一个答案是:除其他外, 卸载事件导致后退/前进缓存无效 .

有些浏览器将整个网页的当前状态存储在所谓的“bfcache”或“page cache”中。这允许他们在通过后退和前进按钮导航时快速地重新呈现页面,并保留dom和所有javascript变量的状态。但是,当页面包含OnUnload事件时,这些事件可能会使页面处于非功能状态,因此页面不存储在bfcache中,必须重新加载(但可以从标准缓存加载)并重新从头呈现,包括运行所有OnLoad处理程序。当通过bfcache返回到页面时,dom将保持其先前的状态,而不需要触发onload处理程序(因为页面已经加载)。

请注意,对于缓存控制和其他HTTP头,bfcache的行为与标准浏览器缓存不同。在许多情况下,浏览器会将页面缓存在bfcache中,即使它不会以其他方式存储在标准缓存中。

jquery自动将卸载事件附加到窗口,因此不幸的是,使用jquery将取消将页面存储在bfcache中的资格,以保留dom并快速返回/转发 . [更新:jquery 1.4中已修复此问题,因此它仅适用于IE]

• Information about the Firefox bfcache
• Information about the Safari Page Cache 和 possible future changes to how unload events work
• Opera uses fast history navigation
• Chrome没有页面缓存( [1] , [2] )
• 用于播放DOM操作和bfcache的页面:
  • This page will be stored in the regular cache
  • This page will not, but will still be bfcached

我一直在尝试让Chrome像Safari那样表现,我发现唯一有效的方法就是 Cache-control: no-store 在标题中。这将强制浏览器在用户按下后退按钮时从服务器重新获取页面。不理想,但比显示过时的页面要好。

Facebook通过修改Ajax请求的URL中的散列标识符来记住页面状态。这些更改记录在浏览器历史记录中,因此当用户单击后退按钮时,哈希值将更改为以前的值。因此,这意味着您将需要一些JavaScript来监视has标识符,并在浏览器更改它时做出反应。 Andreas Blixt has a hash monitoring script available .

这与哈希()符号无关。

如果你要检查苹果的HTTP报头,它只是在缓存页面。

在依赖Ajax和DOM更新的Web应用程序中,使用URL哈希/片段标识符是一种非常常见的挂接/记忆状态的方法。

退房 Really Simple History 计划一些想法。可以监视URL对散列的更改,而rsh可以这样做,同时考虑到浏览器的差异。

任何遇到问题的人 Rails 这——你的问题不是bfcache(我以为是)——而是 turbolinks 宝石。 Here 是如何移除它。

希望这能节省你一些时间,让你的头撞到墙上。

您要查找的是某种类型的URL哈希管理。URL中的仅用于客户端。

当您使用JS更改背面的状态时,您将更新URL中的数据。

此外,还可以添加一些类型的轮询,以监视哈希是否已更改,并根据哈希中的新数据加载页面状态。

看看这个:

http://ajaxpatterns.org/Unique_URLs