JS 客户端API 之 history pushState/ r

• History

  使用back(), forward(), Go() 可以在用户历史记录中前进和后退。

• Ajax + 添加和修改history实体（pushState / raplaceState）

HTML5 引入了 history.pushState() 和 history.replaceState() 这两个方法，他们允许添加和修改 history实体。

1. history.pushState(state, title, url)

 pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给  
你看的而已,第一个参数是一个对象,你可以放入需要的参数,第二个标题名称,第三个就是url.这是地址栏里显
示的东西。 url 不能跨域。

2. history.replaceState(state,title,url)

同history.pushState，只不过使用新的state 和URL替换当前的。

 ####3. window.onpopstate

用户点击浏览器历史前进后退按钮，并且页面无刷的时候（由于使用pushState修改了history）会触发
popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。

• 例子

var App={
    Init:function(){
        App.State(title,url);
        App.StateListen();
    },
    State:function(title,url){//无刷新改变URL
        if(window.history.pushState){
            window.history.pushState({title:title,url:url},title,url);
        }else{
            location.href=url;
        }
        document.title=title;
    },
    StateListen:function(){//监听地址
        var url=location.href.toString().split("/");
 
        window.addEventListener('popstate', function(e){
          if (history.state){
            var url=e.state.url;
            //根据url值进行相应操作
          }
        },false);
    }
};