使用HTML5 history API新特性实现无刷新载入网页

在html5之前我们使用ajax技术实现无刷新页面载入,其优点就不在过多的阐述。
现在讲讲ajax刷新的缺点:
- 无法使用浏览器的前进、后退来切换网页内容;
- ajax刷新页面内容改变后无法改变浏览器地址栏中的url;
- 对搜索引擎很有友好;
html5中新增了两个接口,history.pushState和history.replaceState,通过这两个接口可以实现页面无刷新载入,并且能够改变浏览器地址栏中的url,能够很好的避免传统ajax无法改变浏览器url及前进后退等的缺点。
HTML5中的History API
- history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
- history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。
- history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。
浏览器兼容性
API | Chrome | Firefox(Geko) | Internet Explorer | Opera | Safari |
pushState, replaceState | 5 | 4.0(2.0) | -- | 11.50 | 5.0 |
history.state | -- | 4.0(2.0) | -- | 11.50 | -- |
因为不是所有的浏览器都支持此新特性,所以我们有必要在使用前判断是否支持此api,判断方法如下:
function check_history_api(){ return (window.history && history.pushState); }
如何使用
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
state对象除了要title和url之外,你也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的,这里就不多介绍了。
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。
window.addEventListener('popstate', function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); } }, false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。