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方法的第一个参数，让咱们构建单页面应用更加的心应手。