JavaFX WebView加载本地Javascript文件

我正在试验JavaFX WebView控件，并且我想使用MathJax Javascript库来呈现数学内容。JavaFX WebView加载本地Javascript文件

作为一个测试，我已经创建了一个基本的JavaFX FXML项目，增加了WebView到FXML和更新的控制器代码如下所示：

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文件（并且最终可以引用本地JavaScript文件应用）。

是我想要实现的可能吗？

来源

2013-09-29 Benjamin Gale

添加MathJax.js文件到同一封装/ page.html中的文件夹，然后参照其作为

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

来源

2013-09-30 10:18:05

JavaFX WebView加载本地Javascript文件

回答

相关问题