Question

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

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

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>

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

enter image description here

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

我已更新控制器代码以查找此页面（html尚未更改）。

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

但这会产生以下结果：

enter image description here

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

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

我想要实现的目标是什么？

Answer 1

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

<script type="text/javascript"
        src="MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

JavaFX WebView加载本地Javascript文件

1 个答案: