Friday Feb 24, 2012

Communicating between JavaScript and JavaFX with WebEngine

Content by Peter Zhelezniakov

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:


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:

public Object call(String methodName, Object... args);
public Object eval(String s);
public Object getMember(String name);
public void setMember(String name, Object value);
public void removeMember(String name);
public Object getSlot(int index);
public void setSlot(int index, Object value);

So, here is another way to go back one history item in a browser:

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

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:


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.

Element p = (Element) webEngine.executeScript("document.getElementById('para')");
p.setAttribute("style", "font-weight: bold");

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.

The code below shows how to set up an interface object:

class Bridge {
    public void exit() {
JSObject jsobj = (JSObject) webEngine.executeScript("window");
jsobj.setMember("java", new Bridge());

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, 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:

<a href="" onclick="java.exit();">here</a>
to exit the application

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.


This blog is maintained by Nicolas Lorain, Java Client Product Manager. The views expressed on this blog are my own & do not necessarily reflect the views of Oracle.


« April 2014