pjax加载使js失效原因及解决

发布于 2020-07-24  254 次阅读


pjax是什么

简单点说,pjax是一个jquery开源的加载组件,它通过ajax和pushState技术提供无需刷新的体验,同时改变了浏览器的url地址,这就解决了ajax饱受批评的缺点——用户无法前进和后退,pjax加载是用户体验大幅度提升,主要在于页面引入的js和css不需要再次引入,其次是如果配置了pjax,不用全局加载页面,可以局部加载。

pjax使部分js失效的原因

原因其实很方便理解,因为pjax一般来说是通过服务端获取html的dom并渲染,而js并不会重新加载,这导致一些根据dom元素加载的js有问题,比如mathjax,lightjs等,都是根据内容的形式来渲染,一般会存在一个init()函数,但是pjax请求不会重新执行init(),从而导致js失效

解决办法

pjax都存在不同阶段的回调函数,这时我们只要在回调函数里写出自己想要重新调用的代码就可以了


function init() {
    $.getScript("https://cdnjs.loli.net/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML", function () {
    var math = document.getElementsByClassName("entry-content")[0];
    MathJax.Hub.Config({
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
            inlineMath: [
                ["$", "$"]
            ], //行内公式选择$
            displayMath: [
                ["$$", "$$"]
            ], //段内公式选择$$
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] //避开某些标签
        },
        "HTML-CSS": {
            availableFonts: ["STIX", "TeX"], //可选字体
            showMathMenu: false //关闭右击菜单显示
        }
    });
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, math])
})
}
...
$(document).on('pjax:complete', function() {
    init();
})

因为我是存在mathjax的js存在问题,所以我以此为例子来说明如果解决问题


浪子三唱,不唱悲歌