有趣的API： history pushState/popstate 无刷新跳转

• history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录。

  • state(any) 需要保存的数据，这个数据在触发popstate事件时保存在event.state上。

  • title(string)：

  Firefox 目前忽略了這個參數，雖然他以後有可能會採用。如果以後改變了這個作法，傳送空白的字串應該還會是安全的。另外，你可以傳送一個短的標題來敘述你想要到的state。 
  目前没有发现有地方保存这个title，推测是state的说明？

  • url(string) 需要更改的url地址。

  • ps：pushState 需要至少两个参数。

• popstate： 浏览器点击前进后退时触发的事件。event.state可以获取当前url下设置的state。

另外获取pushState中设置的state不一定要在popstate事件中获取，直接history.state也可以拿到。

 

其它点什么：

history.pushState

history.pushState({}, "页面标题", "xxx.html");

history.replaceState

history.replaceState(null, "页面标题", "xxx.html");

window.onpopstate

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 该干嘛干嘛
    */
});

pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。