在为动态内容加载文档后尝试手动调用 MathJax 时出现“ReferenceError：MathJax 未定义”

Question

I try to make dynamic page that needs to load math symbol lazily, and so I need to call MathJax after all my math symbol has finished being loaded.我尝试制作需要延迟加载数学符号的动态页面，因此我需要在所有数学符号完成加载后调用 MathJax。 I tried to read MathJax doc and found this: http://docs.mathjax.org/en/latest/advanced/typeset.html but when I did as it told, I get "ReferenceError: MathJax is not defined" error in console.我试图阅读 MathJax 文档并发现： http://docs.mathjax.org/en/latest/advanced/typeset.html但是当我按照它说的做时，我在控制台中收到“ReferenceError：MathJax 未定义”错误. How can I solve this?我该如何解决这个问题？ Here's my html code:这是我的 html 代码：

    <!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" id="MathJax-script" async
                                       src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
        </script>
    </head>
    <body>

        <div id="main" class="container">
            <p>\(A \cup B\)</p>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
        </script>
        <script>
            $(document).ready(function () {
                $("#main").append("<p>\\(A \\cup B\\)</p>");
                MathJax.typeset();
            })
        </script>
    </body>
</html>

Answer 1

Cause原因

By specifying async in your <script> tag, you are loading the MathJax-script in an asynchronous way, meaning your browser is downloading the MathJax library in background, while it continues to execute the rest of the page's content.通过在<script>标记中指定async ，您将以异步方式加载 MathJax 脚本，这意味着您的浏览器正在后台下载 MathJax 库，同时继续执行页面内容的 rest。

Chances are that your document is ready, so your browser executes the call MathJax.typeset();很有可能您的文档已准备就绪，因此您的浏览器会执行调用MathJax.typeset(); before it finishes loading the library, causing this unknown reference error.在它完成加载库之前，导致这个未知的引用错误。

Suggestions建议

You can remove the async property, to force the browser to load the library first, then execute the rest of the scripts.您可以删除async属性，强制浏览器先加载库，然后执行脚本的 rest。

Or you can use defer property, to asynchroneously load the scripts and ensure that the scripts are executed in the right order (they rely on each other).或者您可以使用defer属性来异步加载脚本并确保脚本以正确的顺序执行（它们相互依赖）。

Related topics you might be interested in:您可能感兴趣的相关主题：

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-async https://www.growthwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-async
Script Tag - async & defer 脚本标签 - 异步和延迟
Async and document ready 异步和文档就绪
async="async" attribute of a <script> tag in html, What does it mean? html 中 <script> 标签的 async="async" 属性，这是什么意思？

在为动态内容加载文档后尝试手动调用 MathJax 时出现“ReferenceError：MathJax 未定义”

问题描述

1 个解决方案

解决方案1
1 2020-06-12 11:29:20

Cause原因

Suggestions建议

在为动态内容加载文档后尝试手动调用 MathJax 时出现“ReferenceError：MathJax 未定义”

问题描述

1 个解决方案

解决方案1 1 2020-06-12 11:29:20

Cause原因

Suggestions建议

解决方案1
1 2020-06-12 11:29:20