Android中WebView使用MathJax 3.2.2渲染失效求助

核心问题 #

你使用的是MathJax 3.2.2，但代码中调用了MathJax 2.x专属的MathJax.Hub.Queue API，3.x版本已彻底移除该接口，导致报错Cannot read property 'Queue' of undefined，进而渲染失败。

两步修改实现正常渲染 #

1. 适配MathJax 3.x的HTML配置 #

原HTML中的MathJax.Hub.Config是2.x的配置方式，需替换为3.x的配置结构，且要放在MathJax加载脚本之前：

<html>
<head>
    <script type="text/javascript">
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']],
                processEscapes: true
            },
            chtml: {
                linebreaks: { automatic: true },
                displayAlign: 'center',
                displayIndent: '0'
            }
        };
    </script>
    <script type="text/javascript" src="file:///android_asset/es5/tex-mml-chtml.js"></script>
</head>
<body>
    <p> This LaTex cod load during create activity $$ax^2+bx+c=0$$</p>
    <p>New LaTex render should show below:</p>
    <div id="output"></div>
</body>
</html>

2. 修改Java中按钮点击事件的JS逻辑 #

替换原loadUrl中的过时API，使用MathJax 3.x的MathJax.typeset()方法触发渲染，同时修正LaTeX语法和字符串转义问题：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_latex);

    webView = findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new android.webkit.WebViewClient());

    //initial loading the page
    webView.loadUrl("file:///android_asset/latex_page.html");

    btn = findViewById(R.id.btn);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 修正LaTeX语法：sqrt前需加反斜杠，Java中要转义为\\sqrt
            String latex = "$$(-b+\\sqrt{b^2-4ac}) / (2a)$$";
            // 转义JS字符串中的单引号和反斜杠，避免语法错误
            String escapedLatex = latex.replace("'", "\\'").replace("\\", "\\\\");
            // 先更新DOM内容，再调用MathJax渲染指定元素
            String javascript = "document.getElementById('output').innerHTML = '" + escapedLatex + "';" +
                                "MathJax.typeset(['output']);";
            // 用evaluateJavascript替代loadUrl，更安全可靠（Android 4.4+支持）
            webView.evaluateJavascript(javascript, null);
        }
    });
}

关键说明 #

• MathJax 3.x使用MathJax.typeset()方法触发渲染，传入元素ID数组可只渲染目标元素，提升效率。
• 必须先更新DOM内容，再调用渲染方法，确保MathJax能读取到最新的LaTeX代码。
• 字符串转义不可少：JS中用单引号包裹字符串时，内容里的单引号和反斜杠必须转义，否则会导致JS语法错误。

内容的提问来源于stack exchange，提问作者baponkar