JavaFX WebView 加载本地 Javascript 文件答案

【问题标题】：JavaFX WebView load local Javascript fileJavaFX WebView 加载本地 Javascript 文件
【发布时间】：2013-10-05 15:47:45
【问题描述】：

我正在试验 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>

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

请注意，对于测试，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 文件（最终是一个与应用程序）。

我正在努力实现的目标可能吗？

【问题讨论】：

标签： webview javafx-2

【解决方案1】：

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

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

【讨论】：

如果 MathJax.js 在另一个文件夹中，并且无法移动怎么办？