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操作。