Your source for all things JavaFX

Communicating between JavaScript and JavaFX with WebEngine

JavaFX 2 has introduced the WebEngine and WebView classes to support modern Web standards such as JavaScript, CSS, SVG, and a subset of HTML5.

Besides browsing Web pages, WebEngine can also serve
as a container to host Web applications. Running standalone Web
applications inside JavaFX is not very exciting though. You can do the
same with any browser. What makes it interesting is the fact that the
a Web application can communicate with its hosting JavaFX application,
enabling a two-way communication channel. This article describes how
this channel works in the JavaFX 2.1 Developer Preview.

Invoking JavaScript from JavaFX

The Java application can pass arbitrary scripts to the JavaScript engine of a WebEngine object by calling the WebEngine.executeScript() method:

webEngine.executeScript("history.back()");

The script is executed within the context of the current page. The
result of the script invocation is converted to a Java type and
returned. For the primitive types, the conversion is straightforward:
integer values are converted to Integer, strings to String, etc. Most JavaScript objects are wrapped as instances of the netscape.javascript.JSObject class well-known to LiveConnect developers. Its methods are shown below:

This example shows an interesting aspect of extending the WebEngine functionality. The WebEngine API, as of writing this, is deliberately limited to just a few methods that are considered critically important. However, the WebEngine class supports the much broader JavaScript API. You can use the executeScript() and JSObject
methods to enable this second layer of API and get access to the
functionality you miss. So, while there's no a Java method like goBack(), a similar JavaScript method exists and can be invoked as in the above example.

The JSObject methods apply the same conversion rules to the values they return as executeScript(). For example, the following method returns an instance of java.lang.Integer:

history.getMember("length");

A special case is when a JavaScript call returns a DOM Node. In this case, the result is wrapped in an instance of JSObject that also implements org.w3c.dom.Node.

In this example, the script result is an Element object, and it is wrapped as org.w3c.dom.Element instance.

Making Upcalls from JavaScript to JavaFX

Since we are talking about a two-way communication channel, what
about making calls in the opposite direction: from a Web application
into JavaFX? On the JavaFX side, you need to create an interface object
(of any class) and make it known to JavaScript by calling JSObject.setMember(). Having performed this, you can call public methods from JavaScript and access public fields of that object.

First we need a JSObject to attach our interface object to. The above code uses the JavaScript window
object but any other object would work as well. Note that a cast is
necessary. Then we create an interface object and add it as a new member
of that JSObject. It becomes known to JavaScript under the name window.java, or just java, and its only method can be called from JavaScript as java.exit().
The upcall into Java is synchronous and occurs on the JavaFX
Application thread. The following HTML code enables exiting the JavaFX
application by clicking on a link:

Once you no longer need an interface object, you may want to call the JSObject.removeMember() method to make JavaScript "forget" it.

A Note about Security

Please be careful about functionality you open to JavaScript.
Remember, there is no sandbox for standalone applications. Methods
called by JavaScript on the interface object are invoked directly, as if
they were called from your JavaFX code. If your application enables
browsing arbitrary Web pages, a malicious script may take advantage of
the ability to run Java methods with the user's permissions. So you
probably do not want to write

jsobj.setMember("filesys", new File("/"));

as this would let scripts browse about the whole filesystem. By
carefully designing the interface object, you can always make sure that
only safe functionality is exposed. Another idea is to install and
configure a security manager in your application.

Hi,
I'd like to make Upcalls from JavaScript to JavaFX2 but after clicking "here" nothing happens.
Where should
JSObject jsobj = (JSObject) webEngine.executeScript("window");
jsobj.setMember("java", new Bridge());

Is there any special place where instructions such as
JSObject jsobj = (JSObject) webEngine.executeScript("window");
jsobj.setMember("java", new Bridge());
should go? E.g. before/after page
webEngine.load(s);
I'd appreciate if you could you please provide a complete example of such communication.

setMember() should be called after the page has been loaded. The reason is, JavaScript world is recreated each time a new page is loaded. The newly created window object won't have any custom members installed. A fine place to call setMember() is from a listener attached to WebEngine.getLoadWorker().stateProperty().

I have tried your example in the javafx tutorial but webEngine.executeScript("window");
win.setMember("app", new JavaApp());
does not work. When I click exit application nothing happens except the page goes blank.

Calling from JavaScript to JavaFX does not work.
1. I register the Java object after page was loaded.
2. I wrap the JavaScript code with try/catch block, and print alerts to see if there is en error. I print alerts info by adding alerts handler to my JavaFX code. See example code below.

3. Result: alert handling messages shows that
- script is invoked with no error.
- you can even see that the java object is recognized in the DOM (see printing)
- The code within Java object is not invoked!!! Also debugger does not stop there.

Current workaround seems to be: Using the alerts handler for getting calls from within JavaScript. Use some special syntax your application knows in order to distinguish regular alerts from query messages. For example:

Ok I have some resolution now:
1. With jfxrt.jr of JavaFX version JavaFX 2.0 SDK: Not working
2. With jfxrt.jr of JavaFX version: JavaFX 2.1 Runtime: Work fine!
3. With jfxrt.jr of JavaFX version: JavaFX 2.1 SDK: Work Fine!

Yes, JavaScript to Java communication vie the WebEngine was only introduced in JavaFX 2.1. This article was published a little earlier, as this feature was already available in the JavaFX 2.1 Developer Preview.

Hello, i would like this Communicate with Javascript But my SDK is JavaFX 2.2 and won't work before my Application won't call back from Javascript. I have copied from Posting "Posted by guest on August 17, 2012 at 01:43 AM PDT"