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页面中有数学公式，必须由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);

几秒钟后，脚本开始工作，渲染完成，也就是说，公式显示为真实的数学表达式（具有正确的字体、布局等）。