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>