title: JavaFX WebView load local Javascript file
body: <p>I am experimenting with the JavaFX <code>WebView</code> control and I want to use the <a href="http://www.mathjax.org" rel="noreferrer">MathJax</a> Javascript library to render mathematical content.</p>
  
  <p>As a test I have created a basic JavaFX FXML project, added a <code>WebView</code> to the FXML and updated the controller code like so:</p>
  
  <pre><code>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");
      }
  }
  </code></pre>
  
  <p>The html file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
          &lt;script type="text/x-mathjax-config"&gt;
              MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
          &lt;/script&gt;
          &lt;script type="text/javascript"
                  src="/Users/benjamin/Downloads/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          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}.$$
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works as expected and produces the following result:</p>
  
  <p><img src="https://i.stack.imgur.com/sJdZn.png" alt="enter image description here"></p>
  
  <p>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. </p>
  
  <p>I have updated the controller code to look up the page like this (the html has not been changed).</p>
  
  <pre><code>@Override
  public void initialize(URL url, ResourceBundle rb) {
      webView.getEngine().load(
          this.getClass().getResource("Page.html").toExternalForm());
  }
  </code></pre>
  
  <p>but this produces the following result:</p>
  
  <p><img src="https://i.stack.imgur.com/4P953.png" alt="enter image description here"></p>
  
  <p>As you can see, the mathematical content is no longer rendered.</p>
  
  <p>If I change the html <code>&lt;script&gt;</code> 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). </p>
  
  <p>Is what I'm trying to achieve possible?</p>