YiluPHP
这家伙很懒,什么都没有留下...

经验 静态修改url,不跳转页面

浏览数 158575
以前研究花瓣网的时候,一直很好奇,为什么它可以不刷新整个页面,做到局部刷新,同时URL也变了,还能使用浏览器的前进和后退功能。
现在给大家分享一下这项技术,其实就是利用HTML5的history.pushState()修改当前页面的URL。

例如原来的URL是http://www.yiluphp.com/user/center
<script>
setTimeout(function () {
history.pushState(null,document.title,'user/blog/666');
}, 3000);
</script>
在页面中使用上述代码,3秒后浏览器地址栏的URL就变成了
http://www.yiluphp.com/user/blog/666
而页面没有重新请求服务器,用户也可以使用浏览器的“前进”“后退”功能。
就是这样简单,你可以使用AJAX刷新局部数据后,使用history.pushState()功能静态修改URL,用户可以复制URL分享给他人,F5刷新页面也还是显示当前内容。
其实HTML5还有一个特性history.replaceState(),它也能静态修改当前的URL,但是它不会在浏览器的历史记录中增加一条记录,即不能使用浏览器的后退功能。


======================================

history对象详解

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进。

跳转方法

go()

使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数,表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于后退按钮),正数表示向前跳转(类似于前进按钮) 
go()方法无参数时,相当于history.go(0),可以刷新当前页面

back()

back()方法用于模仿浏览器的后退按钮,相当于history.go(-1)

forward()

forward()方法用于模仿浏览器的前进按钮,相当于history.go(1) 
如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是静默失败

[注意]使用历史记录时,页面通常从浏览器缓存之中加载,而不是重新要求服务器发送新的网页

增改记录:

history.pushState() , history.replaceState()

HTML5为history对象添加了两个新方法,history.pushState()和history.replaceState(),用来在浏览历史中添加和修改记录。state属性用来保存记录对象,而popstate事件用来监听history对象的变化

pushState()

history.pushState()方法向浏览器历史添加了一个状态(增加一个记录)。pushState()方法带有三个参数:一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象,此处可以填null

title —— 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null

URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL

replaceState(参数见上所述)

把当前的页面的历史记录替换掉

他们最大的特点是添加或替换历史记录后,浏览器地址栏会变成你传的地址,而页面并不会重新载入或跳转。

例如,假设当前的页面地址是example.com/1.html,且history中此时只有一条当前页面的记录。

当你执行 history.pushState(null, null, “2.html”)后,浏览器的地址栏会显示example.com/2.html,但并不会跳转到2.html,甚至并不会去检查2.html存不存在,只是加入一个最新的历史记录项。此时history中会有两个记录。假如你此时点击页面上的link跳转到另外一个页面后,点击浏览器的后退按钮,则url会变成example.com/2.html,如果此前的1.html的页面浏览器有缓存的话会显示1.html的内容,否则会发起请求example.com/2.html。如果再次点后退,url会变成example.com/1.html。

而如果执行 history.replaceState(null, null, “2.html”)的话,浏览器的地址栏也会显示example.com/2.html,区别是history中只有当前2.html的记录,而1.html的记录已被替换掉。

利用这些特性,可以用来修改当前页面的URL来达成某些目的,比如可以用来记住搜索条件。

我来说说