Pjax 实现无刷新加载页面
- Published on
- Authors
- Name
- Wxm
给朋友制作网站的时候，收到一个需求，就是要无刷新完成页面切换，最好还要有过渡动画。
因为是原生 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());
});