How do I include jquery in javafx webview?


Question

As in the title, i need to include jquery in jfx webview. what I could so far is include a css stylesheet from a resource folder, by the way my application is swing, but using webview from javafx for better css support since jtextpane in swing does not support much css.

1
1
10/18/2013 9:45:34 AM

Accepted Answer

I do like the idea Stephen Katulka's answer and that might be a better answer if Stephen's approach works for you.


Update: I just took a look at the link in shankar's answer and the code there is the same as the sample code included in this answer.


I use the function below to utilize jQuery in WebView:

/**
 * Executes a script which may reference jQuery function on a document.
 * Checks if the document loaded in a webEngine has a version of jQuery corresponding to 
 * the minimum required version loaded, and, if not, then loads jQuery into the document 
 * from the default JQUERY_LOCATION.
 * @param engine the webView engine to be used.
 * @Param jQueryLocation the location of the jQuery script to be executed.
 * @param minVersion the minimum version of jQuery which needs to be included in the document.
 * @param script provided javascript script string (which may include use of jQuery functions on the document).
 * @return the result of the script execution.
 */ 
private static Object executejQuery(final WebEngine engine, String minVersion, String jQueryLocation, String script) {
  return engine.executeScript(
    "(function(window, document, version, callback) { "
      + "var j, d;"
      + "var loaded = false;"
      + "if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {"
      + "  var script = document.createElement(\"script\");"
      + "  script.type = \"text/javascript\";"
      + "  script.src = \"" + jQueryLocation + "\";"
      + "  script.onload = script.onreadystatechange = function() {"
      + "    if (!loaded && (!(d = this.readyState) || d == \"loaded\" || d == \"complete\")) {"
      + "      callback((j = window.jQuery).noConflict(1), loaded = true);"
      + "      j(script).remove();"
      + "    }"
      + "  };"
      + "  document.documentElement.childNodes[0].appendChild(script) "
      + "} "
      + "})(window, document, \"" + minVersion + "\", function($, jquery_loaded) {" + script + "});"
  );
}

The function originates from this sample gist to inject jQuery into a document loaded into a WebView.

Note that the function requires the document to be loaded into the WebView before executing the script to inject jQuery. You can ensure that the document has been loaded by adding a listener to the WebEngine's document property and only triggering the function to inject jQuery once the document has been set.


You can also include the jQuery references directly in the loaded html rather than injecting them. An example of a direct inclusion technique is this example which displays a jQuery DatePicker in a JavaFX WebView screen.

3
5/23/2017 11:48:44 AM

Just load the script as a string from your resource, and then call your WebEngine's executeScript() command to run it:

WebView browser;
StringBuilder jQueryContents = new StringBuilder; 
        // load this string with your jQuery file contents

BufferedReader reader = new BufferedReader(new InputStreamReader(
        App.class.getResourceAsStream("/jquery.min.js")));

String line = reader.readLine();

while (line != null){
    jQueryContents.append(line);
    line = reader.readLine();
}

JSObject jQuery = null;
try{
    jQuery = (JSObject) browser.getEngine().executeScript("$");
}catch (JSException jse){}

if (jQuery == null){ // Don't load jQuery if there already is one, or you
                     // will destroy any $(document).ready() handlers that
                     // were declared previously
    browser.getEngine().executeScript(jQueryContents.toString());
}    

And then your engine has loaded jQuery. If your application is on the internet, it's much better to load jQuery from Google, as it means that if it's been loaded already on a previous page, it doesn't have to load it again. If your app is an intranet or closed sandbox, you don't have to worry about those things.


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon