如何在 javafx webview 中包含 jquery？

Question

如标题所示，我需要在 jfx webview 中包含 jquery。到目前为止，我可以从资源文件夹中包含一个 css 样式表，顺便说一下我的应用程序是 swing，但是使用 javafx 中的 webview 以获得更好的 css 支持，因为 swing 中的 jtextpane 不支持太多 css。

Answer 1

我确实喜欢 Stephen Katulka's 答案的想法，如果斯蒂芬的方法适合您，这可能是一个更好的答案。

---

更新：我刚刚查看了shankar's answer 中的链接，其中的代码与此答案中包含的示例代码相同。

---

我使用下面的函数在 WebView 中使用 jQuery：

/**
 * 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 + "});"
  );
}

该函数源自此sample gist，用于将jQuery 注入到加载到WebView 中的文档中。

注意，该函数需要在执行脚本注入jQuery之前将文档加载到WebView中。您可以通过向 WebEngine 的文档属性添加监听器并仅在设置文档后触发注入 jQuery 的函数来确保文档已加载。

---

您还可以直接在加载的 html 中包含 jQuery 引用，而不是注入它们。直接包含技术的一个示例是此示例，它在 JavaFX WebView 屏幕中显示 jQuery DatePicker。

Answer 2

只需从资源中将脚本作为字符串加载，然后调用 WebEngine 的 executeScript() 命令来运行它：

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());
}    

然后你的引擎已经加载了 jQuery。如果您的应用程序在 Internet 上，最好从 Google 加载 jQuery，因为这意味着如果它已经在前一页上加载过，则不必再次加载它。如果您的应用是内网或封闭沙盒，则不必担心这些事情。

Answer 3

JavaFX 确实支持 JQuery，也就是说，如果您启用了 JavaScript，唯一不起作用的是 JQuery mobile，因为主题滚轮 JRE 出于某种原因无法读取 CSS-UI 控制器。记住 JQuery 仍然是 JavaScript。

我看到你的想法的唯一问题是 JQuery 需要一个 CDN。因此，如果您将 JQuery 包含到 HTML 文档中，请确保包含 JQuery 的 CDN，然后您可以使用带有指向 HTML 文件的链接的加载方法。

Answer 4

我已经尝试过这些解决方案 - 它们有效，但它们很棘手 - 并且丑陋。

如果您的环境是您从 javafx 程序将页面加载为 html-text 并且您不想访问 Internet，则创建一个包含 jquery.min.js 代码的资源（html 文件）。您只需连接 html 文件。这样，jquery 将按预期运行，在 webview 中加载页面。