JavaFX WebView加载本地Javascript文件

时间:2013-09-29 20:43:23

标签: webview javafx-2

我正在尝试使用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文件(最终是一个版本与应用程序捆绑在一起)。

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

1 个答案:

答案 0 :(得分:8)

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

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