网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

在使用 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的涂鸦馆

posted on 2013-06-11 20:44  zoho  阅读(362)  评论(0编辑  收藏  举报