浏览器的历史记录点

二、修改历史记录点

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

1、存储当前历史记录点

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

1. // 当前的url为：http://www.qingdou.me/index.html
2. var json={time:new Date().getTime()};
3. // @状态对象：记录历史记录点的额外对象，可以为空
4. // @页面标题：目前所有浏览器都不支持
5. // @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
6. window.history.pushState(json,”",”http://www.qingdou.me/post-1.html”);
    

   var state = {
           title: title,
           url: options.url,
           otherkey: othervalue
   };
   window.history.pushState(state, document.title, url);
   

 

history.pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

 

执行了pushState方法后，页面的url地址为http://www.qingdou.me/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对象，如：

1. // 当前的url为：http://www.qingdou.me/post-1.html
2. window.onpopstate=function()
3. {
4. // 获得存储在该历史记录点的json对象
5. var json=window.history.state;
6. // 点击一次回退到：http://www.qingdou.me/index.html
7. // 获得的json为null
8. // 再点击一次前进到：http://www.qingdou.me/post-1.html
9. // 获得json为{time:1369647895656}
10. }

值得注意的是：javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。

还有一点注意的是，谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的，谷歌浏览器奇怪的是回触发onpopstate事件，而火狐浏览器则不会。

浏览器兼容性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

基于ajax与html无刷新换url的jquery插件pjax。大家可以去网上看看。