HTML5历史记录：完整页面加载后返回按钮的问题

Question

我制作了一个使用 AJAX 和 HTML5 历史记录的 Web 应用程序（对于较旧的浏览器有回退 history.js）。

我的应用程序只有部分内容通过后台 JavaScript 加载（这部分内容非常重要，大多数时间将使用它）。其他页面可以通过常规链接访问，并在加载这些页面时进行完整页面重新加载。

当我稍微浏览动态部分一下（URL 更改并适合显示的内容），然后通过常规链接离开并点击浏览器的后退按钮时，发生了一些奇怪的事情：只显示最后一个 XHR 中加载的部分（在我的情况下是包含一些数据的 div），而没有布局和 CSS。当我查看源代码（在 Chromium 和 FF+Firebug 中）时，DOM 只包含上述 div。

我期望浏览器缓存 DOM 和其他信息，以便能够重建上一个页面，或者重新加载最后一个 URL（如果不是通过 XHR 加载，则将在布局中呈现该页面）。我尝试将缓存控制标头设置为 XHR 的响应，但未成功。

我准备了一个最简示例：http://moserei.de/html5_history/，感谢您的帮助！

- Martin Vielsmaier

---

这个例子是404错误。你能否上传文件到GitHub或其他地方？希望你还有它们。 - luckydonald

Answer 1

这是一个名称冲突：

原始页面有2个状态并占用2个URL：

1. http://moserei.de/html5_history/
2. http://moserei.de/html5_history/xhr.html

对于 http://moserei.de/html5_history/xhr.html 的XHR请求与原始页面的响应不同。现在，这个URL http://moserei.de/html5_history/xhr.html 关联着两个东西：

1. 原始URL内的状态
2. 通过XHR发送的独立内容

当浏览器需要从缓存中获取此URL(当您点击返回按钮时)时，该怎么办？很难说。我不确定历史记录规范中是否有明确定义的规则，所以尽量避免这种情况。

- Cat Chen

---

你说得对，URL http://moserei.de/html5_history/xhr.html 代表了两个不同的东西。但在我看来，浏览器永远不应该直接显示通过 XHR 加载的内容。因此，它应该尝试定期重新加载它，当 XHR 的响应头禁止缓存时，它会这样做（请参见我的答案）。 - Martin Vielsmaier

如果用户通过 AJAX 访问 /xhr.html，然后刷新页面会怎样呢？用户期望看到相同的内容。因此，当您使用 History API 在 URL 之间进行切换时，通常要确保每个 URL 都可以通过 AJAX 状态更改和完整页面请求访问。 - Cat Chen