HTML5 历史:整页加载后后退按钮的问题
我构建了一个使用 AJAX 和 HTML5 历史记录的 Web 应用程序(对于旧版浏览器有后备,history.js< /a>)。
我的应用程序只有一部分是通过后台 javascript 加载的(该部分相当重并且大部分时间都会使用)。其他页面通过常规链接到达,并且在加载这些页面时将发生整页重新加载。
当我稍微导航一下动态部分(URL 发生变化并适合显示的内容),通过常规链接将其保留,然后点击浏览器后退按钮时,会发生一些奇怪的事情:只有在最后一个 XHR 中加载的部分(在我的例子中)显示包含一些数据的 div),但没有布局和 CSS。当我查看源代码(在 Chromium 和 FF+Firebug 中)时,DOM 仅由所述 div 组成。
我预计浏览器要么缓存 DOM 和其他信息,所以它能够重建前一个页面,或者它会重新加载最后一个 URL(该页面将按预期显示,因为如果它不是通过 XHR 加载的)将在布局内呈现)。我尝试在对 XHR 的响应上设置缓存控制标头,但没有帮助。
我整理了一个最小示例:http://moserei.de/html5_history/
感谢您的帮助!
I build a web app which uses AJAX and the HTML5 history (with a fallback for older browsers, history.js).
Only part of my app is loaded through background javascript (the part which is quite heavy and will be used most of the time). Other pages are reached by regular links and a full page reload will occur when these pages are loaded.
When I navigated the dynamic part a bit (URL changes and fits the content displayed), left it through a regular link and then hit the browsers back button, something weird happens: Only the part which was loaded in the last XHR (in my case a div containing some data) is shown without the layout and css. When I look at the source (in Chromium and FF+Firebug) the DOM only consists of the said div.
I expected that the browser either cached the DOM and other information, so it would be able to rebuild the previous page, or it would reload the last URL (the page would be shown as expected because if it isn't loaded through a XHR it will be rendered within the layout). I tried to set the cache control headers on the response to the XHR, but it didn't help.
I put together a minimal example: http://moserei.de/html5_history/
Thank you for your help!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这是名称冲突:
原始页面有 2 个状态,占用 2 个 URL:
http://moserei.de/html5_history/
http://moserei.de/html5_history/xhr.html
http://moserei.de/html5_history/xhr.html
的 XHR 请求具有与原始页面不同的响应。现在这个 URLhttp://moserei.de/html5_history/xhr.html
与 2 件事相关联:浏览器需要时应该做什么从缓存中获取此 URL(当您单击后退按钮时)?很难说。我不确定历史规范中是否有明确定义的规则,所以尽量避免这种情况。
It's a conflict in names:
The original page has 2 states and occupies 2 URLs:
http://moserei.de/html5_history/
http://moserei.de/html5_history/xhr.html
The XHR request for
http://moserei.de/html5_history/xhr.html
has different response other than the original page. Now this URLhttp://moserei.de/html5_history/xhr.html
is associated with 2 things:What should the browser do when it needs to fetch this URL from the cache (when you click back button)? It's hard to say. I'm not sure whether there's well defined rule in the history spec, so just try to avoid this.