JavaFX WebView加载本地Javascript文件 [英] JavaFX WebView load local Javascript file

查看:343
本文介绍了JavaFX WebView加载本地Javascript文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用JavaFX WebView控件,并且想使用 MathJax Javascript库来呈现数学表达式内容.

I am experimenting with the JavaFX WebView control and I want to use the MathJax Javascript library to render mathematical content.

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

As a test I have created a basic JavaFX FXML project, added a WebView to the FXML and updated the controller code like so:

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文件如下所示:

The html file looks like this:

<!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>

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

This works as expected and produces the following result:

请注意,在测试中,html和JavaScript文件路径均被硬编码到硬盘上的位置,因此下一步是将html打包为与应用程序捆绑在一起的资源,以便它不会查找本地文件.

Note that for the test, both the html and JavaScript file paths are hard coded to locations on my hard drive so the next step is to package the html as a resource that is bundled with the application so that it is not looking for local files.

我已经更新了控制器代码以查找这样的页面(html尚未更改).

I have updated the controller code to look up the page like this (the html has not been changed).

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

但这会产生以下结果:

如您所见,数学内容不再呈现.

As you can see, the mathematical content is no longer rendered.

如果我更改html <script>标记以引用CDN中的JavaScript,则所有操作均与原始示例相同,但我希望能够引用本地JavaScript文件(并最终引用与之捆绑在一起的版本)应用程序).

If I change the html <script> tag to reference the JavaScript from a CDN, then everything works as in the original example but I would like to be able to reference the local JavaScript file (and eventually a version that is bundled with the application).

我要实现的目标是可能的吗?

Is what I'm trying to achieve possible?

推荐答案

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

Add the MathJax.js file to the same package/folder of Page.html then reference to it as

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

这篇关于JavaFX WebView加载本地Javascript文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆