HTML5 对history新增的API：pushState,replaceState,state,popstate - Html

相信大家对window的history对象都很熟悉，html4对history对象定义下面几种方法：

length:返回浏览器历史列表的URL数量

back():加载历史列表中的前一个URL，相当于浏览器上”后退”按钮

foword():加载历史列表中的下一个URL，相当于浏览器上的”前进”按钮

go()：加载历史列表中指定的页面。如history.go(0)->刷新页面，history.go(-1)后退，history.go(1)前进

基于MVC设计模式和ajax技术实现单页面结构时，如果实现前进后退功能呢？这在以前我们可以采用hash方法，但终究不是很完美，我们在访问facebook或google的一些页面时会发现，页面不仅实现了局部刷新，而且页面URL也发生了变化。这就是HTML5对history的贡献.

HTML5对history进行了哪些扩展呢？

1、history.pushState(state object,title,url)
HTML5允许你使用该方法对浏览器历史列表进行添加

pushState方法包含三个参数，state object->状态对象，title->标题(firefox目前会忽略此参数)，url->地址(可选)

state object: 它是由pushState方法创新新的历史条目相关的javascript对象。firefox把该对象存储在用户的磁盘上（以便重启浏览器时该对象也会生效），对其规定了一个640K的大小，如果超过将会报错。

title:新的历史条目的标题，firefox目前会忽略该参数

url：新的历史条目指向的url，该参数可选，如果没有传递url,url默认指向当前页面。

需要注意的是：调用pushState方法后，浏览不会去加载此url,但可能会在稍候尝试加载此url,如用户重启浏览器时。新url不一定是绝对地址，也可以是相对地址，如果是相对地址，新url就是相对当前页面的。

调用history.pushState跟window.location= “url”类似，但pushState有几点优势：

A、新URL可以为同源下的任意地址

B、可以不改变当前页面的URL

C、可以为新的历史条目随意关联一些数据(object)

2、history.replaceState()

HTML5允许你使用该方法对浏览器历史列表进行修改，参数与pushState差不多。区别在于：pushState()可以创建历史，可以配合popstate事件，而replaceState()则是替换掉当前的URL，不会产生历史。

3、history.state

用于保存上面两种方法的数据，不同浏览器对其的读写权限不一样

4、window.onpopstate
事件，使用pushState和replaceState时都会触发该事件。这里需要说明一下的是，现在jQuery比较流行，使用jQuery绑定”popstate”事件时，使用event.state并不能取到history.state的值，而必须使用event.originalEvent.state。

$(window).on("popstate", function (e) {
      //e.state =>undefined
      var state = history.state || e.originalEvent.state;
      if(state){
        //dosomething
      }
   });
   window.addEventListener("popstate",function(e){
   //e.state => 可以取到数据
   });

对于history新增api的安全性，网络其他参考资料展示它是安全的，本站暂未做测试。

浏览器对history新增API的支持情况：

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari IPHONE Android
replaceState
pushState 5+ 4.0 (2.0)+ 10+ 11.50+ 5.0+ 4.2.1+ —
history.state 18+ 4.0 (2.0)+ 10+ 11.50+ 6.0+ 4.2.1+ —

如果检测浏览器是否支持History新增的api:

function supports_history_api() {
      return !!(window.history && history.pushState); 
}

ps:对html5特性的检测我们还可以用：modernizr,使用参数文档：http://diveintohtml5.info/detect.html

写了一个简单的基于jQuery的$.history插件

/*
 * 基于ajax项目的应用程序，修复前进后退按钮
 * 插件写的较简单，只是提供一种基本思路，有错的地方请多指教
 * 调用：
 * 初始化页面时调用$.history.int方法
 * 在需要产生历史记录的操作中调用$.history.create方法，一般为ajax项目的链接中
 */
(function ($) {
    $.history = {
    //$.history.set()->创建历史记录
        create: function (data) {
            if (!data) { return; }
         //这里data假设为json对象或json字符串,最终数据转换为JSON字符串进行保存
            data = typeof data === "string" ? data : JSON.stringify(data);
        //如果当前数据与上一次数据相同，则return
            if($.trim(data)==this.data) { return; }
            if (this.support) {
        //利用pushState创建历史记录，data保存在history.state中
                history.pushState(data, null, null);
            } else {
        //不支持pushState的，主要为IE6、7浏览器，使用document.write()创建历史记录
        //iframe中存在一个ID为state的div,用来存储data数据
        //document.write在iframe中写入内容时，也会触发iframe的onload事件
        //这里用this.state来区别，this.state==1时表示写入状态
                this.state = 1;
                var doc = this.iframe.contentWindow.document;
                doc.open();
                doc.write('<html><body><div id="state">' + data + '</div></body></html>');
                doc.close();
            }
            this.data = $.trim(data);
        },
    //$.history.int()->初始化页面
        init: function (data,callback) {
            var self = this;
            //绑定触发浏览器后退前进按钮事件
            if (this.support) {
        //支持pushState的浏览器，前进后退时会触发popstate事件
                $(window).off("popstate").on("popstate", function (event) {
                    //这里需要注意的是:如果用jQuery方式绑定，e.state是取不到数据的,必须用event.originalEvent.state
                    //使用原生的attachEvent或addEventListener方法可以直接用e.state
                    //safari5.0支持pushState,但不支持history.state
                    var state = history.state || event.originalEvent.state
                    if(state){
                        //dosomething
            //此处可依据history.state数据在用户操作“前进”“后退”按钮时进行不同的操作
            //如利用ajax加载页面
            if(typeof callback==="function"){
                callback(JSON.parse(data));
            }
                    }
                });
            } else {
        //为IE67创建一个iframe，用来产生历史记录
                this.iframe = document.createElement("iframe");
                this.iframe.src = "about:blank";
                this.iframe.style.display = "none";
                $("body").append(this.iframe);
        //为新建的iframe添加onload事件，
                $(this.iframe).off("load").on("load", function () {
                    var state = $(this).contents().find("#state");
            //document.write写入iframe完成时，this.state设为0;
                    if (state[0] && self.state == 0) {
            //dosomething
            //此处可依据history.state数据在用户操作“前进”“后退”按钮时进行不同的操作
            //如利用ajax加载页面
            if(typeof callback==="function"){
                callback(JSON.parse(data));
            }
                    }
                    self.state = 0;
                });
            };
        if(typeof data === "string"){
        //初始化时创建一次历史记录(看是否需要而定)
        this.create(JSON.parse(data))
        }
        },
        //保存当次json字符串
    data: "",
    //为不支持pushState创建的iframe
        iframe: null,
    //判断是否支持pushState
        support: !!(window.history && history.pushState)
    };
})(jQuery);

参考文档:

官方:http://www.w3.org/TR/html5/browsers.html#the-history-interface

Opera:http://dev.opera.com/articles/view/introducing-the-html5-history-api/

Mozilla:http://dev.opera.com/articles/view/introducing-the-html5-history-api/

diveintohtml5:http://diveintohtml5.info/detect.html

window:https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate

http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate