阿贾克斯，返回键和DOM更新 [英] Ajax, back button and DOM updates
问题描述
如果JavaScript的修改DOM页面A，用户导航到网页B，然后点击后退按钮返回到页面A.所有的修改页面A的DOM都将丢失，用户psented与版本最初$ P $从服务器检索
If javascript modifies DOM in page A, user navigates to page B and then hits back button to get back to the page A. All modifications to DOM of page A are lost and user is presented with version that was originally retrieved from the server.
它适用于计算器，Reddit和其他许多热门网站的方式。 （尝试测试注释添加到这个问题，然后导航到不同的页面并点击后退按钮回来 - 您的评论将以水涨船高）
It works that way on stackoverflow, reddit and many other popular websites. (try to add test comment to this question, then navigate to different page and hit back button to come back - your comment will be "gone")
这是有道理的，但有些网站（apple.com，basecamphq.com等）在某种程度上迫使浏览器为用户服务的页面的最新状态。 （去 http://www.apple.com/ca/search/?q=ipod ，点击下载说在顶部链接，然后单击后退按钮 - 所有的DOM的更新将是preserved）
This makes sense, yet some websites (apple.com, basecamphq.com etc) are somehow forcing browser to serve user the latest state of the page. (go to http://www.apple.com/ca/search/?q=ipod, click on say Downloads link at the top and then click back button - all DOM updates will be preserved)
哪里是不一致哪里来的？
where is the inconsistency coming from?
推荐答案
一个答案：除其他事项外，卸载事件引起的后退/前进缓存中无效
One answer: Among other things, unload events cause the back/forward cache to be invalidated.
有些浏览器存储整个网页的当前状态中的所谓bfcache或页缓存。这使他们能够通过前进和后退按钮导航时重新呈现页面很快，preserves DOM和JavaScript的所有变量的状态。然而，当一个页面包含onUnload事件就会，这些事件可能把页面转换成一个非功能状态，所以页面未被存储在bfcache和必须重新加载（但也可以从标准缓存加载）并重新从头开始呈现，包括正在运行的所有onload事件处理程序。当通过bfcache返回页面中，DOM保持在previous状态，而无需火onload事件处理程序（因为已加载的页面）。
Some browsers store the current state of the entire web page in the so-called "bfcache" or "page cache". This allows them to re-render the page very quickly when navigating via the back and forward buttons, and preserves the state of the DOM and all JavaScript variables. However, when a page contains onunload events, those events could potentially put the page into a non-functional state, and so the page is not stored in the bfcache and must be reloaded (but may be loaded from the standard cache) and re-rendered from scratch, including running all onload handlers. When returning to a page via the bfcache, the DOM is kept in its previous state, without needing to fire onload handlers (because the page is already loaded).
请注意，该bfcache的行为是有关于Cache-Control和其他HTTP头的标准浏览器缓存不同。在许多情况下，浏览器将缓存在bfcache一个页面，即使它不会否则它存储在标准的缓存
Note that the behavior of the bfcache is different from the standard browser cache with regards to Cache-Control and other HTTP headers. In many cases, browsers will cache a page in the bfcache even if it would not otherwise store it in the standard cache.
jQuery的自动附加unload事件窗口，所以很遗憾使用jQuery将取消其参赛资格的页面被存储在bfcache的DOM preservation快速前进/后退。 [更新：这已经被定格在jQuery的1.4，以便它仅适用于IE浏览器]
jQuery automatically attaches an unload event to the window, so unfortunately using jQuery will disqualify your page from being stored in the bfcache for DOM preservation and quick back/forward. [Update: this has been fixed in jQuery 1.4 so that it only applies to IE]
- 信息有关Firefox的bfcache
- 对Safari浏览器页面缓存和的信息= http://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">possible未来的变化对事件如何卸载工作
- Opera使用快速历史浏览
- 在Chrome浏览器并没有一个页面缓存（ [1] ， [2] ）
- 网页与DOM操作和bfcache玩：
- Information about the Firefox bfcache
- Information about the Safari Page Cache and possible future changes to how unload events work
- Opera uses fast history navigation
- Chrome doesn't have a page cache ([1], [2])
- Pages for playing with DOM manipulations and the bfcache:
- This page will be stored in the regular cache
- This page will not, but will still be bfcached
这篇关于阿贾克斯，返回键和DOM更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
