Ajax,后退button和DOM更新

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

它在stackoverflow,reddit和许多其他受欢迎的网站上以这种方式工作。 (尝试添加testing评论到这个问题,然后导航到不同的页面,并回击button回来 – 你的评论将“消失”)

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

哪里来的不一致?

7 Solutions collect form web for “Ajax,后退button和DOM更新”

一个答案:其中, 卸载事件导致后退/前进caching失效

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

请注意,关于Cache-Control和其他HTTP标头,bfcache的行为与标准浏览器caching不同。 在许多情况下,即使浏览器不会将其存储在标准caching中,浏览器也会将该页caching在bfcache中。

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

  • 有关Firefox bfcache的信息
  • 有关Safari页面caching的信息,以及将来如何卸载事件
  • Opera使用快速历史导航
  • Chrome没有页面caching( [1] , [2] )
  • 使用DOM操作和bfcache进行播放的页面:
    • 这个页面将被存储在常规的caching中
    • 这个页面不会,但仍然会被bfcached

我一直在努力使Chrome浏览器像Safari一样行事,唯一的办法是设置Cache-control: no-store在标题中Cache-control: no-store 。 这会强制浏览器在用户按下后退button时从服务器重新获取页面。 不理想,但比显示一个过时的页面更好。

Facebook通过修改Ajax请求的URL中的哈希标识符来记住页面状态。 这些更改logging在浏览器历史logging中,所以当用户单击后退button时,哈希将更改为之前的内容。 那么这就意味着你将需要一些Javascript来监视已经存在的标识符,并在浏览器改变时作出反应。 Andreas Blixt有一个散列监视脚本可用 。

这与散列(#)符号无关。

如果你想检查苹果的HTTP头,那么只需caching页面即可。

使用URL散列/片段标识符是在依赖于Ajax和DOM更新的Web应用程序中挂钩/logging状态的一种非常常见的方式。

查看真正简单的历史项目的一些想法。 可以监视URL的散列更改,而且rsh会考虑到浏览器的差异。

对于任何遇到Rails问题的人来说,你的问题不是bfcache(我以为是这样) – 这是turbolinksgem。 这是如何删除它。

希望这会节省你一些时间,把你的头靠在墙上。

你正在寻找的是一些types的URL哈希pipe理。 URL中的#仅用于客户端。

当你用JS更改后面的状态时,则更新URL中#号的数据。

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

看看这个:

http://ajaxpatterns.org/Unique_URLs

  • 直接通过JavaScript访问MongoDB
  • 在jQuery中停止所有活动的ajax请求
  • 等到所有的jQuery Ajax请求完成?
  • CORS错误在同一个域?
  • 如何将HTML5 Canvas作为图像保存在服务器上?
  • 如何让jQuery等待Ajax调用完成后才返回?
  • Ajax上传图片
  • 跨域资源共享GET:“拒绝从响应中获取不安全标题”etag“'
  • 如何在Sonata Admin窗体中使用Ajax?
  • Spring JSON请求获得406(不可接受)
  • 刮/使用JavaScript窃听AJAX数据?