I am experimenting with a JavaFX WebView control and I want to use the Javascript MathJax library to display math content.
As a test, I created a basic JavaFX FXML project, added WebView to FXML, and updated the controller code as follows:
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 gives the following result:
Please note that for the test, both html and JavaScript file paths are hardcoded in places on my hard drive, so the next step is to pack the html as a resource associated with the application so that it does not look for local files.
I updated the controller code to view a page like this one (html has not been changed).
@Override public void initialize(URL url, ResourceBundle rb) { webView.getEngine().load( this.getClass().getResource("Page.html").toExternalForm()); }
but this gives the following result:
As you can see, the math content is no longer displayed.
If I change the html <script> to reference JavaScript from the CDN, then everything works as in the original example, but I would like to be able to reference the local JavaScript file (and, ultimately, the version associated with the application).
Am I trying to achieve something?