HTML5之History

Pjax是一个优秀的解决方案，你有足够多的理由来使用它：

  • 可以在页面切换间平滑过渡，增加Loading动画。
  • 可以在各个页面间传递数据，不依赖URL。
  • 可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲。
  • 所有的标签都可以用来跳转，不仅仅是a标签。
  • 避免了公共JS的反复执行，如无需在各个页面打开时都判断是否登录过等等。
  • 减少了请求体积，节省流量，加快页面响应速度。
  • 平滑降级到低版本浏览器上，对SEO也不会有影响。

Pjax的原理十分简单：

  1. 拦截a标签的默认跳转动作。
  2. 使用Ajax请求新页面。
  3. 将返回的Html替换到页面中。
  4. 使用HTML5的History API或者Url的Hash修改Url。

实例代码：
//添加事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener('click',function(e){
  if(e.target.className==='el'){
    console.log(history.state);
    if(location.pathname.slice('1')===e.target.innerText){
      history.replaceState(null,'el',e.target.innerText);
    }else {
      history.pushState(null,'el',e.target.innerText);
    }

    document.querySelector('#app-container').innerHTML=e.target.innerText;
  }
})
//触发回退前进事件
window.addEventListener('popstate',function(e){
  document.querySelector('#app-container').innerHTML=location.pathname.slice(1);
})

分析：
1、pushState方法会将当前的url添加到历史记录中，然后修改当前url为新url。请注意，这个方法只会修改地址栏的Url显示，但并不会发出任何请求。我们正是基于此特性来实现Pjax。
2、replaceState方法与pushState大同小异，区别只在于pushState会将当前url添加到历史记录，之后再修改url，而replaceState只是修改url，不添加历史记录。
3、onpopstate事件：一般来说，每当url变动时，popstate事件都会被触发。但若是调用pushState来修改url，该事件则不会触发，因此，我们可以把它用作浏览器的前进后退事件。该事件有一个参数，就是上文pushState方法的第一个参数state。
注：IE6到IE9是不支持pushState的，要修改Url，只能利用Url的Hash，也即是#号。你可以随意找个网站试一下，在url后面加上#号和任意内容，页面并不会刷新。此时点击后退也只会回到上一条#号，同样不会刷新。那么我们只需把pushState(新url)换成localtion.hash = 新url，把onpopstate事件换成onhashchange事件就可以兼容IE了。

Comments

去留言
2016-06-12
⬆︎TOP