HTML5不刷新页面修改地址栏

0

现在很多页面都是用ajax来进行数据交互,但是有些场景就会比较尴尬,比如个人中心,进去点修改密码,但是地址栏没有变,下次复制地址后进来还是个人中心,并不是修改密码,所以就有了这个history.pushState这个东西,直接修改地址栏的地址。

废话就这么多,看代码:

history.pushState(state, title, url);

state:状态参数,通过history.state可以获取,其他页面跳转的值为null
title:页面标题(不过好像并没有什么用)
url:修改后的地址

这个修改地址栏后放入到history里面,使用history.backhistory.go或者浏览器的前进后退都有效果。
还有一个history.replaceState这个不会放入到history中,只能修改当前地址。

DEMO地址:http://www.acgist.com/demo/history/index.html

参考文章:http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/