HTML5 History API

Author : luckyGirl

HTML5 history API 出来已久,一直没用到就没仔细看,最近为了满足个蹩脚的需求,非hisotry不可,趁机就回顾并学习了下。

History API的属性以及方法:

  • window.history.length: 返回会话历史集中的项目数量
  • window.history.state: 返回当前的状态对象
  • window.history.go([delta]): 在会话历史集中向后或向前步进指定的量;如果delta为0则重新加载当前页面;如果delta超过了允许的范围,什么也不做
  • window.history.back(): 在会话历史集中向后步进1;如果没有前一页,则什么也不做
  • window.history.forward(): 在会话历史集中向前步进1;如果没有下一页,则什么也不做
  • window.history.pushState(data,title,[,url]): 将给定的数据,按指定的标题及可选的URL压入会话历史中
  • window.history.replaceState(data,title,[,url]): 更新会话历史中的当前项,使之持有给定的数据、标题和可选的URL

pushState() 和replaceState() 是HTML5新增的2个方法,这个State对象主要有2个作用:

  • 第一,保存一个URL中的预先准备的状态描述以便在简单情况下作者不必做解析;
  • 第二,以便作者能够保存不能保存在URL中的状态,因为它只应用到当前文档实例并且如果一个新的文档被打开,它将不得不被重构

以上的“官方作用”有点不好理解,简单来说,在实际应用中主要是配合Ajax实现无刷新跳转,使得在用Ajax提高用户体验的同时也能用浏览器的后退/前进来切换前后数据,ajax的页面也能添加到收藏书签中。

如何实现无刷新跳转?

window.history.pushState({action:1}, 'Page 1', '?page1');

通过pushState()可以更新地址栏内容,但是页面还没有刷新或是跳转,此时需要配合popState事件来监听浏览器的回退/前进,判断state属性来改变页面内容:

function ajaxFunc(){
window.history.pushState({action:1}, 'Page 1', '?page1');
}
window.onpopstate = function(event){
if(event && event.state){
switch(event.state.action){
case 1:
document.title = 'Page 1';
// do some ajax action
}
}
}

你看是不是很简单,当然如果想要实现多浏览器的兼容性,可以参考一些jquery插件来实现。

 

转载请表明出处:LoveCicy

参考:http://www.w3.org/html/ig/zh/wiki/HTML5/history

 

 

standard

Have your say