解决动态ajax/pjax加载mathjax不生效问题

Mathjax

image

如图所见,适用于网页上的显示数学公式的JavaScript库。对浏览器的支持比较全面,据说支持到IE6(这个就比较厉害哦)

使用教程

github仓库地址
官方demo

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

只要引入mathjax的js地址,配置config,就能自动识别文章中的数学公式写法。显示效果如下:


image

发现问题

正常情况下使用,是可以实现显示数学公式的,但是如果你的页面使用了动态加载,即ajax或pjax的情况下,mathjax就不能顺利的渲染出数学公式了。

咳咳,解决动态适配的事情也不是一次两次了,添加事件可以用jquery的on方法委托。在动态调用后执行可以在$.ajax的success方法后执行相关业务逻辑。 pjax则在complete或end后执行相关业务逻辑代码。这里我拿pjax做演示,代码类似下面:

$(document).pjax('a[target!=_top]', '#page', {
    fragment: '#page',
    timeout: 8000,
}).on('pjax:send', function () {
    do something
}).on('pjax:complete', function () {
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML", function() {
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    });
});

想法是在pjax加载complete之后加载mathjax的js依赖,在配置config,因为之前正常使用也是这样的。但是很遗憾,还是没有正常显示。

在官方文档中找到解决方案

遇到问题,最好的方法就是去了解官方的文档,权威有效。(经验表明网上教程没官方靠谱,官方找不到再去互联网上寻求帮助,这对你以后解决问题的能力也是一种锻炼,毕竟不是遇到的所有问题都能在互联网上找到解决方案的)

其中有项动态加载Mathjax,然而很遗憾,测试后发现不行(毕竟我上一步的修改的效果应该和文档这动态加载一致)


image

后来锲而不舍的找到了MathJax.Hub.Typeset()这个方法,结合Queue方法就能实现(不要问我为啥是中文文档,谷歌翻译了解下)


image

我的实现代码如下,仅供参考:
....
.on('pjax:complete', function () {
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML", function() {
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
        // entry-content是文章页的内容div的class
        var math = document.getElementsByClassName("entry-content")[0];
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);
    });
});

好了,到此动态ajax/pjax加载mathjax不生效问题就解决了~

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 26,462评论 1 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 10,260评论 4 57
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,276评论 1 92
  • 内容提供者的基本使用 本文的场景MusicServer提供数据库及内容提供者给其它应用使用,及观察数据库变化,好刷...
    草蜢的逆袭阅读 829评论 0 51
  • 整理了一下以前和同学的聊天记录有点乱。。。 第一天:早餐 majestic cafe (强烈推荐)http://w...
    酱爆阅读 260评论 0 2