window.history

作者：zccst





旧版：
forword()
backword()
go(number)


HTML5中新增了
onhashchange  浏览器兼容性较好，用得较多
pushState / replaceState / onpopState



一、onhashchange
hashchange事件在当前页面URL中的hash值发生改变时触发 (查看location.hash).

区别：
通过window.onpopstate来监听url的变化，但会忽略URL的hash部分。

结论：两者恰恰互补，各有分工。

if ("onhashchange" in window) {
    alert("该浏览器支持hashchange事件!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

hashchange 事件对象有下面两个属性
newURL DOMString 当前页面新的URL
oldURL DOMString 当前页面旧的URL




二、pushState / replaceState / onpopState


（通俗易懂版）
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点，下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈（Array.push()），在window.history里新增一个历史记录点，例如：

// 当前的url为：http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
执行了pushState方法后，页面的url地址为http://qianduanblog.com/post-1.html。

2、替换当前历史记录点

window.history.replaceState和window.history.pushState类似，不同之处在于replaceState不会在window.history里新增历史记录点，其效果类似于window.location.replace(url)，都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

3、监听历史记录点

监听历史记录点，直观的可认为是监听URL的变化，但会忽略URL的hash部分，监听URL的hash部分，HTML5有新的API为onhashchange，我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化，并且可以获取存储在该历史记录点的状态对象，也就是上文说到的json对象，如：

// 当前的url为：http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
// 获得存储在该历史记录点的json对象
var json=window.history.state;
// 点击一次回退到：http://qianduanblog.com/index.html
// 获得的json为null
// 再点击一次前进到：http://qianduanblog.com/post-1.html
// 获得json为{time:1369647895656}
}
值得注意的是：javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。









（文绉绉版）
HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。


1，pushState()
某种意义上，调用pushState()有点类似于设置window.location='#foo'，它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势：

新的URL可以是任意的同源URL，与此相反，使用window.location方法时，只有仅修改 hash 才能保证停留在相同的document中。
根据个人需要来决定是否修改URL。相反，设置window.location='#foo'，只有在当前hash值不是foo时才创建一条新历史记录。
你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法，你只能把相关数据转码成一个很短的字符串。
注意pushState()方法永远不会触发hashchange事件，即便新的地址只变更了hash。


2，replaceState()方法
history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

3，popstate事件

每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。


举例：
history.pushState
菊花插一刀之意，用法举例：
history.pushState({}, "页面标题", "xxx.html");
history.pushStatehistory.replaceState
换把菊花刀之意，用法举例：
history.replaceState(null, "页面标题", "xxx.html");
window.onpopstate
在菊花刀拔插的时候……，用法举例：
window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 该干嘛干嘛
    */
});

完整实例：
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

策略如下：
每次手动点击左侧的菜单，我将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面，使用history.pushState塞到浏览器历史中。
浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。
页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作。



如果您觉得本文的内容对您的学习有所帮助，您可以微信：