利用HTML5新特性让Ajax改变URL,支持前进后退

Author : lovecicy

最近用到了一个HTML5的新特性:hashchange 事件,此事件监听浏览器地址栏URL”#”号后面的内容的变化。因为浏览器的history会记录hash变化,所以可以利用这个API,让Ajax支持浏览器的前进和后退按钮。 但是后来发现了一个更好的方案:使用HTML5的history API。这样,就可以正常修改URL了,而且同样支持浏览器的前进和后退按钮,但必须保证URL是可访问的。 在HTML5之前,history API只有一个length属性,在支持HTML5的浏览器中,会有一个state属性,同时多了两个方法:pushState()和replaceState(),这两个方法配合window.popstate事件一起工作。 当你在A页面上点击一个链接时,触发了一个Ajax请求,请求返回后通过js修改了页面显示。如果这时候返回了主页,再点击浏览器的返回按钮,你想回到被修改了的A页面,但是,你只会回到初始的A页面。这时候,如果在发送Ajax请求前使用history的pushState()方法,就可以把目标地址推送进浏览器的历史记录,于是浏览器的地址栏发生变[Read More]

standard