HTML5 History: Problems with back button after full page load [duplicate]
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!
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 URL http://moserei.de/html5_history/xhr.html
is associated with 2 things:
- A state within the original URL
- A separated content sent through XHR
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.
精彩评论