• 推荐 6 推荐
  • 收藏 85 收藏,3.1k 浏览

前言

不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。

这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便,我们下文还是统称为Pjax。

为什么要这么做?

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

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

原理呢?

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

HTML5 History API

我们来看看HTML5在History里增加了什么:

history.pushState(state, title, url)

pushState方法会将当前的url添加到历史记录中,然后修改当前url为新url。请注意,这个方法只会修改地址栏的Url显示,但并不会发出任何请求。我们正是基于此特性来实现Pjax。它有3个参数:

  • state: 可以放任意你想放的数据,它将附加到新url上,作为该页面信息的一个补充。
  • title: 顾名思义,就是document.title。不过这个参数目前并无作用,浏览器目前会选择忽略它。
  • url: 新url,也就是你要显示在地址栏上的url。

history.replaceState(state, title, url)

replaceState方法与pushState大同小异,区别只在于pushState会将当前url添加到历史记录,之后再修改url,而replaceState只是修改url,不添加历史记录。

window.onpopstate 事件
一般来说,每当url变动时,popstate事件都会被触发。但若是调用pushState来修改url,该事件则不会触发,因此,我们可以把它用作浏览器的前进后退事件。该事件有一个参数,就是上文pushState方法的第一个参数state。

一个实例:

这里我们以daipig为例,打开daipig,地址栏是http://www.daipig.com 。接下来打开F12 Console,输入:

history.pushState({ a: 1, b: 2 }, null, "http://www.daipig.com/abcdefg");

可以发现,url已经变成我们输入的url了,但页面并没有刷新,也没有发出任何请求。现在再输入history.state,就可以看到我们刚刚传过来的第一个参数state了。

这时点击后退,url会回到www.daipig.com,同样是没有刷新。只不过后退的时候其实是触发了window.onpopstate事件的。

详细文档可以查阅MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_...

怎么完整的实现Pjax?

Pjax的原理上文已经讲了,并不复杂。我实现了一个比较粗糙的Pjax库,已经能满足不少需求,如果你有兴趣,可以上Github帮忙完善一下代码。地址是:https://github.com/Coffcer/coffce-pjax 。

完整的代码见Github,这里我们只谈需要注意的一些地方。

匹配选择器

要实现Pjax,难免就会有匹配选择器的需求。你需要判断当前点击的元素,是否匹配指定选择器。这里我给出一个兼容至IE8的解决方法:

// 判断element是否匹配选择器selector
function matchSelector(element, selector) {
var match =
document.documentElement.webkitMatchesSelector ||
document.documentElement.mozMatchesSelector ||
document.documentElement.msMatchesSelector ||
// 兼容IE8及以下浏览器
function(selector, element) {
// 这是一个好方法,可惜IE8连indexOf都不支持
// return Array.prototype.indexOf.call(document.querySelectorAll(selector), this) !== -1; if (element.tagName === selector.toUpperCase()) return true; var elements = document.querySelectorAll(selector),
length = elements.length; while (length--) {
if (elements[length] === this) return true;
} return false;
}; // 重写函数自身,使用闭包keep住match函数,不用每次都判断兼容
matchSelector = function(element, selector) {
return match.call(element, selector);
}; return matchSelector(element, selector);
}
// 验证一下
matchSelector(document.getElementById("abc"), "#abc"); // true
matchSelector(document.querySelector("a"), "p"); // false

在现代浏览器上,优先使用原生的matchesSelector方法来判断,在IE8及以下的浏览器里,循环document.querySelector的结果集,依次对比。

这个方法利用了闭包,然后重写自身,只有在第一次调用时需要判断加哪个前缀执行哪个方法,其后都是调用了闭包的match函数。

不支持HTML5 PushState的浏览器怎么办?

IE6到IE9是不支持pushState的,要修改Url,只能利用Url的Hash,也即是#号。

你可以随意找个网站试一下,在url后面加上#号和任意内容,页面并不会刷新。此时点击后退也只会回到上一条#号,同样不会刷新。

那么我们只需把pushState(新url)换成localtion.hash = 新url,把onpopstate事件换成onhashchange事件就可以兼容IE了。
QQ音乐,网易云音乐等就是使用这种方式。

最新文章

  1. React Native知识1-FlexBox 布局内容
  2. BZOJ 2330: [SCOI2011]糖果 [差分约束系统] 【学习笔记】
  3. Git stash方法(转)
  4. Android进阶篇-时间滑动控件
  5. mysql服务启动
  6. python运维开发(十八)----Django(二)
  7. 进程退出前删除自身EXE
  8. 爱你不容易 —— Stream详解
  9. .Net 调用中国气象台Web Service
  10. java后台常见问题
  11. 解决 安装VMwanre tools时 Enter the path to the kernel header files for the 3.10.0-862.14.4.el7.x86_64 kernel
  12. Rabbitmq-direct演示
  13. SQL SERVER CXPACKET-Parallelism Wait Type 的惯用解决方案
  14. Android Studio “懒人”必备插件android layout id converter
  15. 解决在sass中使用calc不能包含变量的问题。
  16. Centos7下修复 视频播放器(先 安装VLC视频播放器)
  17. Linux进程间通信简介
  18. 基本C库函数
  19. 51定时器控制4各led,使用回调函数机制
  20. mysql分布式技术

热门文章

  1. proxyTable 解决跨域问题
  2. ACE调试中的一个小问题——ace_main_i无法链接
  3. Spring集成Redis集群(含spring集成redis代码)
  4. 【转】ESFramework成熟的C#网络通信框架(跨平台)
  5. LAMP架构二
  6. atom搭建markdown环境及问题
  7. 180508 - 解决有关VIVO的2018-04-01安全补丁导致的APP闪退问题
  8. linux下Oracle数据库实例开机自启动设置
  9. FormatUtil类型格式转换
  10. Hive学习笔记——基本配置及测试