HTML5 API 之 history

HTML5 API 之 history

简介

可以操作浏览器的历史记录，在其中添加项目。配合新增的popstate事件，可以实现在不刷新页面的前提下动态的改变浏览器地址的Url和页面内容。

使用

var state = {};
state.name = 'history-1';
window.history.pushState(state,null,'history-1');
state.name = 'history-2';
window.history.pushState(state,null,'history-2');
window.addEventListener('popstate',myfunc,false);
function myfunc(e){
    if(e.state){
        alert(e.state.name);
    }   
}

history.pushState

var state = {};
state.name = 'history-1';
window.history.pushState(state,null,'history-1');

• 首先，我们创建了一个空对象。这个对象就是我们传给pushState方法的第一个参数。它的作用是保存当前页面的一些信息，当我们通过前进或者后退按钮到达这个页面的时候，可以访问这个对象中保存的信息。在上面的栗子中，我们访问的是的它的name属性。
• pushState的第二个参数，用来设置页面的标题，但是目前好像没有浏览器支持，所以我们传入一个null。
• 第三个参数，是我们希望在地址栏中显示的url后面附加的字符串，这样，我们可以清晰的看到页面url的变化。
• 这样，一条历史记录就被我们添加了。

popstate

window.addEventListener('popstate',myfunc,false);

当浏览器前进或者后退的时候触发

• popstate是HTML5种新增的事件。当点击浏览器的前进或者后退时，触发改事件。该事件的默认参数是一个PopStateEvent对象。该对象中有一个state属性，包含历史记录中一个页面保存的信息。结合本文的例子来看，保存的就是我们创建的state对象。

• 那么，我们就试着去访问一个这个对象，看看其中是否真的包含我们存进去的state对象的信息。

  function myfunc(e){
      if(e.state){
          alert(e.state.name);
      }   
  }
  

• 点击后退，屏幕弹框显示

  history-1

• 总结：HTML5 的historyAPI可以方便的控制页面的历史记录，让我们有了在单页面中实现前进后退动作的更好方式。结合pushState方法的第一个参数，让我们构建单页面应用更加的心应手。