HTML5之pushstate、popstate操作history,无刷新改变当前url
A-A+

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

2016年09月12日 技术分享 暂无评论 阅读 加载中...

一、认识window.history

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

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

在历史记录中后退,可以这么做:

这就像用户点击浏览器的后退按钮一样。
类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:

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

通过指定一个相对于当前页面位置的数值,你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。
要后退一页(相当于调用back()):

向前移动一页(相当于调用forward()):

类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点:

二、修改历史记录点

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

1、存储当前历史记录点

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

执行了pushState方法后,页面的url地址为http://www.linjunlong.com

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对象,如:

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

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

转载自:http://www.cnblogs.com/sniper007/p/3536157.html

给我留言

Copyright © 小林博客 保留所有权利.  

用户登录

分享到: