【笔记】NexT8.8排除部分页面的PJAX

发表于 更新于 阅读次数：

前言

在NexT8.8主题中启用PJAX后，默认会在全部页面中生效，PJAX生效的页面将不再重载JS代码，使得部分页面JS代码失效

为了解决这一问题，研究了一套代码作为排除PJAX生效的页面

踩坑

  • 一开始研究了PJAX的原理，但是研究的是jquery pjax，后来在查看NexT的主题配置时发现，NexT使用的PJAX是next-theme/pjax而非defunkt/jquery-pjax，所以一开始的研究方向就错了，找到了很多jquery pjax的排除方法，都没有实现，最终通过从PJAX原理出发，解决了问题

  • PJAX原理：通过为超链接添加监听事件，从而拦截页面跳转

排除

  • 因为PJAX的生效方式是通过超链接的绑定，来实现拦截页面跳转，所以从超链接入手

我研究了启用了PJAX的NexT8.8，发现每个a标签都有一个特殊的属性用于控制PJAX的监听状态，这个属性名为data-pjax-state，当这个属性值为load时，就会启用PJAX，我突发奇想，想办法把修改这个属性的值改为unload，从而实现PJAX排除

1
2
3
4
5
6
7
8
9
10
11
12
// 首先获取所有菜单的超链接
let menus = document.querySelectorAll(".site-nav a");

// 遍历这些超链接对象
for (let menu of menus) {
  // 找到想要操作的超链接对象。例如我在分类页面添加了自定义JS，想要排除分类页面
  if (menu.getAttribute("href")==="/categories/") {
    // 修改这个超链接对象的属性值
    menu.setAttribute("data-pjax-state", "unload");
  }
  ...
}

完成

  • 总的来说过程还是很坎坷，但是成功后的喜悦远大于失败时的烦恼
  • 其实一次的成功背后通常都要有无数次的失败，只要不放弃总会有解决的办法

后记

  • 在通过<script></script>标签引用JS时，通过data-pjax属性，就能实现每次加载新页面都会重复执行这个JS代码了
1
2
3
<script data-pjax="" type="text/javascript">
    ...
</script>

<src>：外部JS文件路径

1
<script data-pjax="" type="text/javascript" src="<src>"></script>

参考文献

Laravel社区——Destiny
文江博客——JSmiles
叶落阁
CSDN——qq_39355295
百度经验——一搜娱乐
NexT官方博客
Hui-Shao’s Blog