8

我正在试验 JavaFXWebView控件，我想使用MathJax Javascript 库来呈现数学内容。

作为测试，我创建了一个基本的 JavaFX FXML 项目，向WebViewFXML 添加了一个并更新了控制器代码，如下所示：

public class SampleController implements Initializable {

    @FXML
    private WebView webView;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        webView.getEngine().load(
            "file:///Users/benjamin/Desktop/Page.html");
    }
}

html 文件如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
        </script>
        <script type="text/javascript"
                src="/Users/benjamin/Downloads/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        </script>
    </head>
    <body>
        When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
        $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </body>
</html>

这按预期工作并产生以下结果：

在此处输入图像描述

请注意，对于测试，html 和 JavaScript 文件路径都被硬编码到我硬盘上的位置，因此下一步是将 html 打包为与应用程序捆绑在一起的资源，这样它就不会查找本地文件。

我已经更新了控制器代码以像这样查找页面（html 尚未更改）。

@Override
public void initialize(URL url, ResourceBundle rb) {
    webView.getEngine().load(
        this.getClass().getResource("Page.html").toExternalForm());
}

但这会产生以下结果：

在此处输入图像描述

如您所见，不再呈现数学内容。

如果我将 html<script>标记更改为从 CDN 引用 JavaScript，那么一切都与原始示例一样，但我希望能够引用本地 JavaScript 文件（以及最终与应用程序捆绑在一起的版本）。

我想要实现的目标是可能的吗？

4

1 回答 1

8

将 MathJax.js 文件添加到 Page.html 的同一包/文件夹中，然后将其引用为

<script type="text/javascript"
        src="MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
于 2013-09-30T10:18:05.137 回答