开启Pjax导致Mathjax失效解决办法

Mathjax是一个适用于网页上的显示数学公式的JavaScript库。对浏览器的支持比较全面,据说支持到IE6,博主果断选择了它

发现问题

正常情况下使用,是可以实现显示数学公式的,最近我给我的主题使用了动态加载,即Pjax,就发现Mathjax就不能顺利的渲染出数学公式了。
Pjax的作用是通过减少HTTP的请求次数,加速页面载入的速度。Pjax的核心是Ajax,Ajax简单来讲就是避免浏览器重复解析网页的head部分,从而达到载入页面提速的目的。但页面中需要用到的js插件的声明,通常都是写在head中的。这就导致了Ajax与众多js插件冲突的问题。
虽然网上也有一些Ajax与MathJax冲突的解决方案,可是我并没有在Pjax中找到明确的Ajax部分。无奈之下,竟然查到了github上Pjax的开源项目,在项目里第560条issue中,作者明确了给出了Pjax与其他Js冲突时,统一的解决方案:
[greenbar]Plugins that are designed to only initialize things once on DOM load will not work well with pjax. You need plugins that use event delegation to handle all elements, even those that are dynamically added to the page using ajax (including pjax). [/greenbar]

解决问题

添加事件可以用jquery的on方法委托。在动态调用后执行可以在$.ajax的success方法后执行相关业务逻辑。Pjax则在complete或end后执行相关业务逻辑代码。这里我把我调试好的代码贴上,仅供大家参考。

···
.on('pjax:complete', function() {
        $.getScript("https://cdnjs.loli.net/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML", function() {
            MathJax.Hub.Config({
                tex2jax: {
                    inlineMath: [
                        ['$', '$'],
                        ['\\(', '\\)']
                    ]
                }
            });
            // wysiwyg是文章页的内容div的class
            var math = document.getElementsByClassName("wysiwyg")[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]);
        });
打赏
评论区
头像