本文档旨在解决在使用 MathJax 动态加载包含 LaTeX 公式的 HTML 文件时，公式无法正确渲染的问题。通过 jQuery 的 load() 函数异步加载内容，并结合 MathJax 的 typeset() 方法，提供了一种确保公式在加载后正确显示的解决方案。重点在于理解 load() 函数的异步特性，并使用回调函数来触发 MathJax 的渲染。
在使用 MathJax 构建 Web 应用时，经常需要动态加载包含 LaTeX 公式的 HTML 片段。然而，由于 jQuery 的 load() 函数是异步执行的，这可能导致 MathJax 在内容加载完成之前就开始尝试渲染，从而导致公式无法正确显示，只显示 LaTeX 源码。
要解决这个问题，关键在于确保 MathJax.typeset() 方法在 HTML 内容完全加载到页面之后再执行。
解决方案：使用 load() 函数的回调函数
jQuery 的 load() 函数提供了一个回调函数参数，该函数会在内容加载完成后被调用。我们可以利用这个回调函数来触发 MathJax 的渲染。
以下是修改后的 JavaScript 代码：
function loadHTML(filename){
let file = `formulas/${filename}`
$("#content").load(file, function () {
MathJax.typeset();
});
};代码解释：
示例：
假设你的 index.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>index</title>
</head>
<body>
<button onclick="loadHTML('test1.html')">Press for formula</button>
<div id="content" class="content">Formulas coming here</div>
</body>
</html>
<script>
function loadHTML(filename){
let file = `formulas/${filename}`
$("#content").load(file, function () {
MathJax.typeset();
});
};
</script>并且你的 formulas/test1.html 文件包含 LaTeX 公式：
$$a = {b over c}$$当点击 "Press for formula" 按钮时，test1.html 中的公式 a = b/c 将会被正确渲染。
注意事项：
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\(', '\)']]
}
};
</script>总结：
通过利用 jQuery load() 函数的回调函数，我们可以确保 MathJax 在 HTML 内容完全加载后才进行渲染，从而解决动态加载 LaTeX 公式时公式无法正确显示的问题。 这种方法简单有效，能够帮助你更好地构建包含动态 LaTeX 公式的 Web 应用。
以上就是使用 MathJax 动态加载 LaTeX 公式：确保公式正确渲染的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
747
