当前位置: 首页 > 面试题库 >

Ajax,后退按钮和DOM更新

殷永嘉
2023-03-14
问题内容

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

它可以在stackoverflow,reddit和许多其他流行的网站上以这种方式工作。(尝试向该问题添加测试评论,然后导航至其他页面并单击“返回”按钮以返回-
您的评论将“消失”)

这很有意义,但是某些网站(apple.com,basecamphq.com等)以某种方式迫使浏览器向用户提供页面的最新状态。(转到http://www.apple.com/ca/search/?q=ipod,单击顶部的“说下载”链接,然后单击“后退”按钮-
所有DOM更新将被保留)

不一致来自何处?


问题答案:

一个答案:除其他事项外, 卸载事件会使后退/前进缓存无效

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

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

jQuery会自动将卸载事件附加到窗口,因此不幸的是,使用jQuery会使您的页面无法保存在bfcache中以进行DOM保留和快速前进/后退
。[更新:此问题已在jQuery 1.4中修复,因此仅适用于IE]

  • 有关Firefox bfcache的信息
  • 有关Safari页面缓存的信息以及未来卸载事件的工作方式可能发生的变化
  • Opera使用快速历史记录导航
  • Chrome没有页面缓存([1],[2])
  • 用于处理DOM操作和bfcache的页面:
    • 该页面将存储在常规缓存中
    • 该页面不会,但仍会bfcached


 类似资料:
  • 问题内容: 我在www.darknovagames.com上运行了基于浏览器的游戏。最近,我一直在努力使用CSS重新格式化该网站,试图让其所有页面都根据HTML标准进行验证。 我一直在想着要在页面左侧放置AJAX导航菜单的想法(而不是每次都将用户带到一个单独的页面,而是需要重新加载标题和导航栏,而这几乎是不会改变的),我知道如果这样做,我可能会破坏浏览器中的“前进/后退”按钮。我的问题是,我应该继

  • 问题内容: 我正在使用pushState为网站上的Ajax内容创建有意义的URL。我想在用户单击前进或后退按钮时刷新Ajax内容。但是我遇到了问题,因为Chrome(正确)在“历史记录遍历”(前进/后退按钮)和“结束”(页面加载)上都暗示了onpopstate。我想创建一个区分页面加载和历史遍历的onpopstate处理程序,因为如果已经成功加载Ajax内容,我就不希望刷新它。有人可以帮助我区分两

  • 问题内容: 你好, 我正在寻找解决方案,其中后退和前进按钮控制我的Ajax调用历史记录。 因此,如果我要进行ajax调用,然后按“返回”,我想重新加载原始页面。 如果我先执行ajax调用,然后再执行另一个,然后按“后退”按钮,我想再次执行第一个ajax调用。 依此类推…(即,如果我现在按前进按钮,则重做第二个ajax coll shell ;-)) 谢谢 更新 好吧,我使用名为jQuery Add

  • 如何更改searchview中黑色箭头(后退按钮)的颜色,我已尝试使用以下代码进行自定义 但它不起作用

  • 在我的应用程序中,我使用动作栏和导航抽屉。操作栏中有一个按钮用于打开和关闭导航抽屉。我想把它的颜色改成红色。我该怎么做?