Pjax适配

  因为开启Pjax后网页跳转后不会触发DOMContentLoaded事件,同时由于右下角的菜单每次跳转都会被更新,所以我们在跳转后必须重新注册事件。

链接跳转

1
2
3
4
5
6
7
var pjax = new Pjax()

// use case 1
pjax.loadUrl("/your-url")

// use case 2 (with options override)
pjax.loadUrl("/your-other-url", { timeout: 10 })

  我们有两种方案,第一种是让代码在每次跳转后都执行一次:

1
2
3
4
5
6
7
8
(() => {
const task = () => {
// 这里写要执行的代码
}
document.addEventListener('DOMContentLoaded', task)
document.addEventListener('pjax:success', task)
})()

 另一种方案是把事件注册到上级元素中,然后鼠标点击时检测被点击元素的id:

1
2
3
4
5
6
7
8
9
10
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('rightside').addEventListener('click', event => {
// 被点击的元素
const element = event.target.id ? event.target : event.target.parentNode
if (element?.id !== 'share-link') return

// 这里写要执行的代码
})
})

上面两种方案任意选取一个使用即可解决Pjax的兼容问题。

我用的pjax适配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*pjax加载函数*/
pjaxplasx()//打开运行一次
function pjaxplasx() {
if (typeof pjaxqj === 'function') {pjaxqj();}// 判断点击函数是否存在存在就执行,点击函数为pjaxqj()
if (typeof pjaxxc === 'function') {pjaxxc();}// 判断点击函数是否存在存在就执行
}
document.addEventListener("pjax:complete", pjaxplasx) // pjax加载完成(切换页面)后再执行一次
document.addEventListener("DOMContentLoaded",pjaxplasx);//第一次

/*pjax执行函数,可在其他页面添加多条执行函数*/

function pjaxqj() {
// 执行代码一
}
function pjaxxc(){
// 执行代码二
}

也可以切换页面直接运行

1
2
3
document.addEventListener('pjax:complete', (e) => {
// 这里写要执行的代码
})

简单粗暴

如果代码在页面内可以写一个判断简单粗暴如果代码存在则运行(1或者任何数值等于开)

1
2
3
if(1){
// 这里写要执行的代码
}

技巧

1
<script async data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}' charset="utf-8" data-pjax="" src="https://cdn.hlcssc.com/cdn/js/nav_menu.js"></script> 

async为异步先加载
data-pace-options=’{ “restartOnRequestAfter”:false,”eventLag”:false}’
为pjax的最佳搭档就是pace了,一个小进度条可以跟踪pjax的加载进度,非常的方便。但是遇见卜算子、百度统计的崩溃大户,我们会经常卡进度,为了避免卡进度,并且这些js运行与网站并没有什么关系,所以我们可以添加pace的属性来排除掉这些加载。
charset=”utf-8” 为编码
data-pjax=”” 为pjax重载
也可以在footer中插入一个 .js-pjax 来添加到pjax的selectors作为重载的dom(顺便就会重载js)

1
2
3
#footer
.js-pjax
reloadFunction()
1
2
3
<div class="js-pjax">
//代码被包裹
</div>