HTML5- history

文章引用于: http://www.cnblogs.com/stephenykk/p/5057022.html

API 实例

HTML5 history API只包括2个方法：history.pushState()和history.replaceState()，以及1个事件：window.onpopstate。
history.pushState(state, title, url)
调用pushState()方法将新生成一条历史记录，方便用浏览器的“后退”和“前进”来导航（“后退”但是至关经常使用的按钮）。另外，从URL的同源策略能够看出，HTML5 history API的出 发点是很明确的，就是让无跳转的单站点也能够将它的各个状态保存为浏览器的多条历史记录。当经过历史记录从新加载站点时，站点能够直接加载到对应的状态

• state，它能够理解为一个拿来存储自定义数据的元素。它和同时做为参数的url会关联在一块儿。
• title，是一个字符串，目前各种浏览器都会忽略它（之后才有可能启用，用做页面标题），因此设置成什么都不要紧。目前建议设置为空字符串。
• url 第3个参数是URL地址，通常会是简单的?page=2这样的参数风格的相对路径，它会自动以当前URL为基准。须要注意的是，本参数URL须要和当前页面URL同源，不然会抛出错误。

history.replaceState()
它和history.pushState()方法基本相同，区别只有一点，history.replaceState()不会新生成历史记录，而是将当前历史记录替换掉。

window.onpopstate
在只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调用的history.back()等导航方法，且切换先后的两条历史记录都属于同一个网页文档，才会触发本事件。

实例

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