在使用 AJAX 方式更新页面内容后,页面的 URL 并没有改变,因此用浏览器的前进和后退无法切换这些不同的页面状态。这个问题利用 HTML5 的 history API 可以完美地解决。
HTML5 history API 最简单的例子如下:
if (history.pushState) { var state = {page: 2 }; history.pushState(state, "title", location.href + '#2'); window.onpopstate = function(event) { console.log(event.state); } }
其中 pushState 方法可以在历史记录中添加一个访问记录,该方法有三个参数,该记录要保存的状态对象,标题(当前浏览器不会处理这个参数),URL 地址。类似地,我们有 replaceState 方法可以修改当前访问记录。对于用这两个方法添加或者处理的访问记录,当浏览器再次访问时会触发 popstate 事件。
参考资料:
[1] MDN 中文 - DOM - 操纵浏览器的历史记录
[2] Web technology for developers - Web API reference - window.history
[3] MDN 中文 - DOM - window.onpopstate
[4] HTML5 Demo: HTML5 History API
[5] Dive Into HTML5 - Manipulating History for Fun & Profit
[6] MSDN - history object
[7] 修改历史:History 详解 | JS Mix
[8] HTML5 history API介绍 - keakon的涂鸦馆