给朋友制作网站的时候，收到一个需求，就是要无刷新完成页面切换，最好还要有过渡动画。

因为是原生 js 做的网页，便想到使用 jquery 的 ajax 解决问题。 不过由于考虑到文件大小并且也并没有使用 jq 其他功能，最后决定使用了不需要引入 jq 的pjax。

使用

引入pjax

<script src="https://cdnjs.cloudflare.com/ajax/libs/pjax/0.2.8/pjax.min.js"></script>

script

$(document).ready(function () {
  var pjax = new Pjax({
    elements: "a",
    selectors: ["main"],
    cacheBust: false,
    scrollRestoration: false,
    switches: {
      main: Pjax.switches.sideBySide,
    },
    //切换动画效果
    switchesOptions: {
      main: {
        classNames: {
          remove: "Animated-easeOut Animate--noDelay",
          add: "Animated-easeIn",
          backward: "Animated-easeOut",
          forward: "Animated-easeOut",
        },
      },
    },
  });
});

问题与解决方案

script 重载

问题

因为 pjax 切换页面并没有完全刷新，所以页面的 js 不会从头执行一遍，导致 js 不生效。

解决

  • 方式 1 - 重载部分 js
function pjax_reload() {
  //需要执行的js
}
// Pjax 完成后，重新加载上面的函数
document.addEventListener("pjax:complete", function () {
  pjax_reload();
});
  • 方式 2 - 重载 js 文件 这种情况多数用于第三方文件，比如，卜算子统计的脚本、谷歌/百度/腾讯分析的脚本等，这些脚本在每一次页面加载后都需要执行。 在引入这些文件的标签上添加 data-pjax 属性，然后将具有这个属性的标签重新添加在页面中。有时候不方便在这些标签上添加额外的属性，那么你可以在这些标签外套一层标签，如<div class=".pjax-reload"></div>，然后将 .pjax-reload 里的元素全部重新添加到页面中即可。
<script data-pjax src="https://cdn.jsdelivr.net/gh/sukkaw/busuanzi/bsz.pure.mini.js"></script>
<div class=".pjax-reload">
  <script src="https://www.google-analytics.com/analytics.js"></script>
</div>
// jQuery 写法
$("script[data-pjax], .pjax-reload script").each(function () {
  $(this).parent().append($(this).remove());
});

参考