即使没有异步属性，也未定义 MathJax答案

【问题标题】：MathJax is not defined even though no async attribute即使没有异步属性，也未定义 MathJax
【发布时间】：2020-10-18 02:45:47
【问题描述】：

我正在尝试运行此 html 代码并在 chrome devtools 控制台中获取“amsciiTest.html:20 Uncaught ReferenceError: MathJax is not defined at amsciiTest.html:20”。通过从 MathJax 的脚本标记中删除 async 属性已解决了类似的问题，但是我没有包含 async 属性，但 MathJax 仍然未定义。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Math</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
    <!--<script src="https://vader-coder.github.io/asciimathml/ASCIIMathML.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/x-mathjax-config;executed=true">
        MathJax.Hub.Config({  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
     </script>
     <script type="text/javascript">
     //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        let output = '`H(s)=C\\frac{N(s)}{D(s)}`';
        //output = '[\\H(s)=C\\frac{N(s)}{D(s)}\\]';
        $(document).ready(function(){
            $('#works').html("jQuery Works");
            $('#eq').html(output);
        });
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        /*setTimeout(function () {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"])
        }, 2000);*/
    </script>
</head>
  <body>
    Equation:<br>
    `sum_(i=1)^n i^3=((n(n+1))/2)^2`<br>
    <p id='works'></p>
    <p id='eq'></p>
  </body>
</html>

【问题讨论】：

MathJax 库看起来在您共享的代码中已注释。我的意思是脚本标签
@Nishant ??这是第一个<script> 标签
是的，好的。第二个脚本标签是什么？你确定依赖关系吗？是否依赖jquery？
您的 MathJax URL 不是项目文档中推荐的 URL。

标签： javascript html jquery undefined mathjax

【解决方案1】：

如果您使用MathJax documentation 中推荐的 CDN，您的示例将有效。使用https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML 而不是https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Math</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <!--<script src="https://vader-coder.github.io/asciimathml/ASCIIMathML.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/x-mathjax-config;executed=true">
        MathJax.Hub.Config({  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
     </script>
     <script type="text/javascript">
     //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        let output = '`H(s)=C\\frac{N(s)}{D(s)}`';
        //output = '[\\H(s)=C\\frac{N(s)}{D(s)}\\]';
        $(document).ready(function(){
            $('#works').html("jQuery Works");
            $('#eq').html(output);
        });
        console.log(typeof MathJax);
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        /*setTimeout(function () {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"])
        }, 2000);*/
    </script>
</head>
  <body>
    Equation:<br>
    `sum_(i=1)^n i^3=((n(n+1))/2)^2`<br>
    <p id='works'></p>
    <p id='eq'></p>
  </body>
</html>

您还可以在完全加载时注册一个回调，这是更推荐的，因为根据他们的文档，MathJax 应该异步加载。

<script type="text/x-mathjax-config">
    MathJax.Hub.Register.StartupHook("End",function () {
      console.log("Mathjax loaded");
      console.log(MathJax);
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
    });
</script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Math</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
    <!--<script src="https://vader-coder.github.io/asciimathml/ASCIIMathML.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
        MathJax.Hub.Register.StartupHook("End",function () {
          console.log("Mathjax loaded");
          console.log(typeof MathJax);
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        });
     </script>
     <script type="text/javascript">
     //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"]);
        let output = '`H(s)=C\\frac{N(s)}{D(s)}`';
        //output = '[\\H(s)=C\\frac{N(s)}{D(s)}\\]';
        $(document).ready(function(){
            $('#works').html("jQuery Works");
            $('#eq').html(output);
        });
        
        /*setTimeout(function () {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "TFS"])
        }, 2000);*/
    </script>
</head>
  <body>
    Equation:<br>
    `sum_(i=1)^n i^3=((n(n+1))/2)^2`<br>
    <p id='works'></p>
    <p id='eq'></p>
  </body>
</html>

【讨论】：