javascript - 即使没有异步属性,也未定义 MathJax

标签 javascript html jquery undefined mathjax

我正在尝试运行此 html 代码并在 chrome devtools 控制台中获取“amsciiTest.html:20 Uncaught ReferenceError: MathJax is not defined at amsciiTest.html:20”。通过从 MathJax 的脚本标记中删除异步属性解决了类似的问题,但是我没有包含异步属性,但 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 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>

关于javascript - 即使没有异步属性,也未定义 MathJax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62612694/

相关文章:

javascript - Laravel/Vue.js项目中如何使用Vuesax上传组件?

javascript - Knockout.js 不能在 rails 6 中使用 webpack

javascript - 用户输入文本后,如何使用 AJAX 更新数据库?

javascript - 如果单击按钮,使用 Jquery 隐藏/取消隐藏文本框

javascript - 将日期转换为用户友好格式时出错

javascript - 更新多个垂直条

javascript - 如何使用 js 在隐身窗口中打开 URL?

html - Bootstrap 轮播无法使用图像上的特定链接

javascript - 如何在路由 Ember.js 中创建默认菜单

jquery - 切换侧边栏不起作用时通过 JQuery 更改属性的 CSS