详解HTML5之pushstate、popstate操作history,⽆刷新改
变当前url
⼀、认识window.history
window.history表⽰window对象的历史记录，是由⽤户主动产⽣，并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能⼒。它暴露了⼀些⾮常有⽤的⽅法和属性，让你在历史记录中⾃由前进和后退。1、历史记录的前进和后退
在历史记录中后退，可以这么做：
window.history.back();
这就像⽤户点击浏览器的后退按钮⼀样。
html动画效果
类似的，你可以前进，就像在浏览器中点击前进按钮，像这样：
window.history.forward();
2、移动到指定历史记录点
通过指定⼀个相对于当前页⾯位置的数值，你可以使⽤go()⽅法从当前会话的历史记录中加载页⾯（当前页⾯位置索引值为0，上⼀页就是-1，下⼀页为1）。
要后退⼀页（相当于调⽤back()）：
(-1);
向前移动⼀页（相当于调⽤forward()）：
(1);
类似的，传递参数“2”，你就可以向前移动2个记录点。你可以查看length属性值，了解历史记录栈中⼀共有多少个记录点：window.history.length;
⼆、修改历史记录点
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点，下⾯逐⼀简要说明⼀下。
1、存储当前历史记录点
存储的⽅式类似于数组的⼊栈（Array.push()），在window.history⾥新增⼀个历史记录点，例如：
// 当前的url为：qianduanblog/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页⾯标题：⽬前所有浏览器都不⽀持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","qianduanblog/post-1.html");
2、替换当前历史记录点
placeState和window.history.pushState类似，不同之处在于replaceState不会在window.history⾥新增历史记录点，其效果类似于place(url)，都是不会在历史记录点⾥新增⼀个记录点的。当你为了响应⽤户的某些操作，⽽要更新当前历史记录条⽬的状态对象或URL时，使⽤replaceState()⽅法会特别合适。
3、监听历史记录点
监听历史记录点，直观的可认为是监听URL的变化，但会忽略URL的hash部分，监听URL的hash部分，HTML5有新的API为onhashchange，我的博客⾥也有说到该⽅法和跨浏览器的兼容解决⽅案。可以通过popstate来监听url的变化，并且可以获取存储在该历史记录点的状态对象，也就是上⽂说到的json对象，如：
// 当前的url为：qianduanblog/post-1.html
{
// 获得存储在该历史记录点的json对象
var json=window.history.state;
// 点击⼀次回退到：qianduanblog/index.html
// 获得的json为null
/
/ 再点击⼀次前进到：qianduanblog/post-1.html
// 获得json为{time:1369647895656}
}
值得注意的是：javascript脚本执⾏window.history.pushState和placeState不会触发onpopstate事件。
还有⼀点注意的是，⾕歌浏览器和⽕狐浏览器在页⾯第⼀次打开的反应是不同的，⾕歌浏览器奇怪的是回触发onpopstate事件，⽽⽕狐浏览器则不会。
以上所述是⼩编给⼤家介绍的详解HTML5之pushstate、popstate操作history,⽆刷新改变当前url，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。