Android WebView 中的 MathJax - 在加载 HTML 页面后注入脚本

Question

我必须向我的应用程序添加 MathJax 功能。

根据一些示例，要添加的正确脚本是

<script type='text/x-mathjax-config'>"
                            +"MathJax.Hub.Config({ "
                           + "showMathMenu: false, "
                           + "jax: ['input/TeX','output/HTML-CSS'], "
                           + "showProcessingMessages: false, "
                           + "messageStyle: 'none', "
                           + "extensions: ['tex2jax.js'], "
                           + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                           + "'noErrors.js','noUndefined.js'] } "
                           + "});</script>"
                           + "<script type='text/javascript' "
                           + "src='file:///android_asset/MathJax/es5/tex-mml-svg.js'"
                           + "></script><span id='math'></span>

该脚本是从 Asset 目录中的本地文件夹加载的。

当从文件系统上的另一个文件夹（私有应用程序文件夹）加载到 Android WebView 时，我必须将该脚本添加到本地 HTML 文件。

HTML 页面中包含必须由 MathJax 函数读取的数学公式。

在加载之前，我无法将脚本作为标记注入 HTML 文件中。 但公式的渲染也必须在加载后立即执行。

在示例中，他们提出了类似的建议：

webView.loadDataWithBaseURL("http://bar", "<script type='text/x-mathjax-config'>"
                        +"MathJax.Hub.Config({ "
                       + "showMathMenu: false, "
                       + "jax: ['input/TeX','output/HTML-CSS'], "
                       + "showProcessingMessages: false, "
                       + "messageStyle: 'none', "
                       + "extensions: ['tex2jax.js'], "
                       + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                       + "'noErrors.js','noUndefined.js'] } "
                       + "});</script>"
                       + "<script type='text/javascript' "
                       + "src='file:///android_asset/MathJax/es5/tex-mml-svg.js'"
                       + "></script><span id='math'></span>","text/html","utf-8","");    

该指令在页面加载后执行，然后是

webView.evaluateJavascript("MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");

我认为是在文档中呈现所有数学标签的指令

但我明白了

I/chromium: [INFO:CONSOLE(1)] "Uncaught ReferenceError: MathJax is not defined"

在加载的页面中注入脚本并执行渲染的正确方法是什么？

Answer 1

我的案例的解决方案是以下代码

String scriptText=
                        "MathJax.Hub.Config({ "
                        + "showMathMenu: false, "
                        + "jax: ['input/TeX','output/HTML-CSS'], "
                        + "showProcessingMessages: false, "
                        + "messageStyle: 'none', "
                        + "extensions: ['tex2jax.js'], "
                        + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                        + "'noErrors.js','noUndefined.js'] } "
                        + "});";

                
String js_command = "var newScript = document.createElement(\"script\");"
+"newScript.setAttribute('type','text/x-mathjax-config');"
+"var inlineScript = document.createTextNode(\""+scriptText+"\");"
+"newScript.appendChild(inlineScript);"
+"document.body.appendChild(newScript);"

+"newScript = document.createElement(\"script\");"
+"newScript.setAttribute('type','text/javascript');"
+"newScript.setAttribute('src','file:///android_asset/MathJax/es5/tex-mml-svg.js');"
+"document.body.appendChild(newScript);";

没有后续调用指令

MathJax.Hub.Queue(['Typeset',MathJax.Hub]);

代码是这样调用的：

webView.evaluateJavascript(js_command);

几秒钟后脚本运行并完成渲染，即公式显示为真实的数学表达式（具有正确的字体、布局等）。