Pjax库

Pjax 介绍及全部用法,以下文档收集来源于网络,若侵权联系立即删除

pjax是什么

pjax是一个jQuery插件,它通过ajax和pushState技术提供了极速的(无刷新ajax加载)浏览体验,并且保持了真实的地址、网页标题,浏览器的后退(前进)按钮也可以正常使用。

使用方法

通过这种方式可以让页面中所有的链接都实现pjax加载,并指定#pjax-container作为容器元素

$(document).pjax('a', '#pjax-container');

通过这种方式可以让页面中所有在.main的链接都实现pjax加载,并指定.main作为容器元素

$(document).pjax('a[target!=_blank]', '.main', {fragment: '.main',timeout: 8000});

网页发生错误

$(document).on('pjax:error', function() {
    alert("网络慢,等等我吧~");
        history.back();
});

网页开始加载

$(document).on('pjax:start', function() {
    //加载延迟中...................
    $(".main-content").removeClass("wrapShow");
});

网页加载结束

$(document).on('pjax:end', function() {
    //加载中...................
    $(".main-content").delay(500).addClass("wrapShow");
});

网页内容准备就绪

$(document).on('ready pjax:end', function(event) {
linker();
tocs();
copycodes();
postcolor();                                 
styleS();
dearmsdanlazyload();
dearmsdanMathjax();

}); /*end ready pjax*/

手动调用pjax。主要用于非click事件发起pjax请求的情况。

function applyFilters() {
    var url = urlForFilters()
    $.pjax({url: url, container: '#pjax-container'})
}

参数说明

下面代码表示:当 selector 被点击时,执行ajax请求,并将返回的HTML字符串填充在 container 标记的位置。
$(document).pjax(selector, [container], options)

  1. selector:string 类型,用于click 事件委托 的选择器。
  2. container:string 类型,用于标识唯一pjax容器的选择器。
  3. options:object 类型,包含下列选项。

pjax配置选项(options)

选项默认值说明
timeout650ajax超时时间(毫秒),超时后强制刷新整个页面
pushtrue使用pushState在浏览器中添加历史记录
replacefalse替换URL地址但不添加浏览器历史记录
maxCacheLength20容器元素缓存内容的最大值(次)
versionstring或function,返回当前pjax版本
scrollTo浏览器滚动条的垂直滚动位置。设为 false 时禁止滚动
type“GET”参考 ajax
dataType“html”参考 ajax
container被替换内容元素的CSS选择器
urllink.hrefstring或function,返回ajax请求响应的URL
targetlinkpjax 取代原来链接方式_self或_blank
fragmentcss选择器,提取ajax响应内容中指定的内容片段

事件

除了pjax:click和pjax:clicked,其他所有pjax事件都是在pjax容器元素上触发的。

事件取消参数说明
pjax链接事件的生命周期
pjax:click✔︎options链接被激活的时候触发;取消的时候阻止pjax
pjax:beforeSendxhr, options可以设置XHR头
pjax:startxhr, options加载开始
pjax:sendxhr, options加载结束
pjax:clickedoptionspjax通过链接点击已经开始之后触发
pjax:beforeReplacecontents, options从服务器端加载的HTML内容完成之后,替换当前内容之前
pjax:successxhr, options从服务器端加载的HTML内容替换当前内容之后
pjax:error✔︎xhr, textStatus, error, optionsajax请求出错;除非被取消,否则会强制刷新页面
pjax:timeout✔︎xhr, options在 options.timeout 之后触发;除非被取消,否则会强制刷新页面
pjax:completexhr, options从服务器端加载
浏览器前进后退事件的生命周期
pjax:popstatedirection 事件的属性: “back”/“forward”
pjax:startnull, options内容替换之前
pjax:beforeReplacecontents, options在用缓存中的内容替换HTML之前
pjax:endnull, options替换内容之后
pjax:callbacknull, options页面脚本加载完成后(Admui项目)

注: