1 Reply Latest reply: Jul 9, 2012 1:22 PM by jsmith RSS

    Can I embed jQuery into JavaFX WebEngine?

      Writing a JavaScript in WebEngine sometimes to be too difficult. And while I need to customized some UI. Such as I need to click a link in a website and then open a popup, execte js in webEngine seems to be too difficult. How can embed jQuery and jQuery UI into webEngine and then I write jQuery and jQuery UI will be more easy.
      (I'm writing an application to encapsulate others website, don't have any authority to change the original website content.)
      (I tried use setCreatePopupHandler in webEngine, but seems it can just open the link, can't customized open an UI I want.)
        • 1. Re: Can I embed jQuery into JavaFX WebEngine?
          I embedded Firebug lite into WebEngine using the following code:
          engine.executeScript("if (!document.getElementById('FirebugLite')){E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;E = E ? document['createElement' + 'NS'](E, 'script') : document['createElement']('script');E['setAttribute']('id', 'FirebugLite');E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');E['setAttribute']('FirebugLite', '4');(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');}"); 
          The code is a slightly modified derivative of executing the FirebugLite bookmarklet in WebEngine (not quite a bookmarklet because WebEngine in 2.1 does not recognize the javascript: protocol out of the box).

          So I thought maybe I could use the same technique to embed jQuery in a web page - and I can :-)

          I took the solution from here http://stackoverflow.com/questions/2170439/how-to-embed-javascript-widget-that-depends-on-jquery-into-an-unknown-environmen and ran it through webEngine via executeScript. It loaded jQuery into pages which were not defined to include jQuery in their html source. After doing this, I could execute jQuery operations on the page and ditch the painful, unwieldy DOM interface.
            private static Object executejQuery(final WebEngine engine, 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 = \"http://code.jquery.com/jquery-1.7.2.min.js\";"
                  + " 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, \"1.7.2\", function($, jquery_loaded) {" + script + "});"
          An executable sample app is here: https://gist.github.com/3077942

          The sample app will load up a document, insert the jQuery library into the document and then execute a jQuery javascript script on the document which will hide any links clicked via a jQuery slow hide animation.

          I was really happy to see this work.


          I guess you could use a similar technique for embedded jQueryUI controls in pages which did not previously have such controls defined - though that does seem a little more complex.

          An example of embedding a jQueryUI datepicker in a webEngine is here: