Sunday, 29 September 2013

JavaFX WebView load local Javascript file

JavaFX WebView load local Javascript file

I am experimenting with the JavaFX WebView control and I want to use the
MathJax Javascript library to render mathematical content inside the
WebView control.
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");
}
}
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:

My next step was to package the html as a resource that is bundled with
the application. The controller code is updated to look up the page like
this:
@Override
public void initialize(URL url, ResourceBundle rb) {
webView.getEngine().load(this.getClass().getResource("Page.html").toExternalForm());
}
but this produces the following result:

As you can see, the mathematical content is no longer rendered (the html
has not been changed).
If I change the html to load the Javascript from the CDN, then everything
works as in the original example but for the time being I am interested in
loading the local Javascript file. Is this possible?

No comments:

Post a Comment