如何在javafx webview中包含jquery？ [英] How do I include jquery in javafx webview?

问题描述

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

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.

推荐答案

我喜欢这个想法 Stephen Katulka的回答和如果斯蒂芬的方法适合你，这可能是一个更好的答案。

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

更新：我只是看了一下 shankar的答案中的链接，其代码与本答案中包含的示例代码相同。

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.

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

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

该函数源于此示例要点将jQuery注入到加载到WebView中的文档中。

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

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

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.

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

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.

这篇关于如何在javafx webview中包含jquery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！