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

2013-09-02 14:04 ·Ab叔 1299 20 <- 点击左侧的数字“攒”一个吧

View demo      Download

在html5之前我们使用ajax技术实现无刷新页面载入,其优点就不在过多的阐述。

现在讲讲ajax刷新的缺点:

  1. 无法使用浏览器的前进、后退来切换网页内容;
  2. ajax刷新页面内容改变后无法改变浏览器地址栏中的url;
  3. 对搜索引擎很有友好;

html5中新增了两个接口,history.pushState和history.replaceState,通过这两个接口可以实现页面无刷新载入,并且能够改变浏览器地址栏中的url,能够很好的避免传统ajax无法改变浏览器url及前进后退等的缺点。

HTML5中的History API

  1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
  2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。
  3. 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完美的进行无刷新浏览了。