HTML5之pushstate、popstate操做history,无刷新改变当前url

1、认识window.history

window.history表示window对象的历史记录，是由用户主动产生，而且接受javascript脚本控制的全局对象。window对象经过history对象提供对览器历史记录的访问能力。它暴露了一些很是有用的方法和属性，让你在历史记录中自由前进和后退。

一、历史记录的前进和后退

在历史记录中后退:

         window.history.back()--至关于用户在浏览器的工具栏上点击返回按钮；

 

前进：

         window.history.forward()--至关于用户在浏览器的工具栏上点击前进按钮；

 

二、移动到指定历史记录点

经过指定一个相对于当前页面位置的数值，你可使用go()方法从当前会话的历史记录中加载页面（当前页面位置索引值为0，上一页就是-1，下一页为1）。

要后退一页（至关于调用back()）：

       window.history.go(-1);

 

向前移动一页（至关于调用forward()）:

       window.history.go(-1);

 

相似的，传递参数“2”，你就能够向前移动2个记录点。你能够查看length属性值，了解历史记录栈中一共有多少个记录点：

   window.history.length;

 

2、修改历史记录点

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

一、存储当前历史记录点

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

 

1 2 3 4 5 6

// 当前的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。

二、替换当前历史记录点

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

三、监听历史记录点

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

1 2 3 4 5 6 7 8 9 10

// 当前的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事件。