Ajax,后退按钮和DOM更新

如果javascript修改了页面A中的DOM,则用户导航到页面B,然后点击返回按钮返回页面A.对页面A的DOM的所有修改都将丢失,并且向用户显示最初从服务器检索的版本.

它在stackoverflow,reddit和许多其他流行的网站上以这种方式工作.(尝试在此问题中添加测试评论,然后导航到不同的页面并点击返回按钮返回 - 您的评论将"消失")

这是有道理的,但一些网站(apple.com,basecamphq.com等)在某种程度上迫使浏览器为用户提供最新的页面状态.(转到http://www.apple.com/ca/search/?q=ipod,单击顶部的"下载"链接,然后单击"返回"按钮 - 将保留所有DOM更新)

来自哪里的不一致？

1> Miles..：

---

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

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

请注意,bfcache的行为与标准浏览器缓存的不同之处在于Cache-Control和其他HTTP头.在许多情况下,浏览器会将页面缓存在bfcache中,即使它不会将其存储在标准缓存中.

jQuery会自动将卸载事件附加到窗口,所以不幸的是,使用jQuery会使您的页面无法存储在bfcache中以保存DOM并快速返回/转发.[更新:这已在jQuery 1.4中修复,因此它仅适用于IE]

有关Firefox bfcache的信息

有关Safari页面缓存的信息以及卸载事件如何工作的未来可能的更改

Opera使用快速历史导航

Chrome没有页面缓存([1],[2])

用于DOM操作和bfcache的页面:

此页面将存储在常规缓存中

此页面不会,但仍将是bfcached

---

你完全钉了它.redbit和stackoverflow都在使用jquery,而basecamp和apple正在使用prototypejs.这几乎解释了一切.

2> nornagon..：

---

我一直试图让Chrome的行为像Safari一样,而我发现的唯一方法就是设置Cache-control: no-store标题.这会强制浏览器在用户按下后退按钮时从服务器重新获取页面.不理想,但比显示过时的页面更好.

---

这是对原始问题的正确答案.如果要在后退按钮上强制重新加载服务器,请使用cache-control'no-store,no-cache,must-revalidate'.Chrome想要无商店,IE希望必须重新验证.对于其他浏览器(和w3c),no-cache就足够了.