JSNI window document $wnd $doc

GWT JSNI Variables – An Exhaustive List



Reference to the root browser window GWT widgets are being rendered to. Note that when called from the iframe linker, GWT code runs in an iframe, not the root browser window, so calling window will reference the wrong window.
Same as above, but referencing the document, not window. Same as $wnd.document
The X.Y.Z version of GWT this code was compiled with. Because Google uses the GWT trunk in their apps, they will return 0.0.999.
The name of the compiled GWT module. Note, you may have assumed this was obfuscated. It’s not.
The root URL for this module’s entrypoint.
The MD5 hash for this module.
Url and port of code server in hosted mode. i.e.
$hostedHtml Version
Version of hosted HTML page (hosted.html) in use.This is the page that shows error traces in browser in hosted mode.
Used when collecting stats in hosted mode. Same value as window.__gwt_SessionID
Undocumented. Used to collect stats in hosted mode.
Method that makes code reentry safe. This should wrap GWT code that will be called  from outside of GWT via Javascript calls you wish to expose from your GWT application. See docs for more.
$stack, $stackDepth, $location
Undocumented. Trace information used by JsStackEmulator.


Example of accessing GWT Version

To determine the running version of a GWT application, you can use JSNI to return that version.

// easily get the GWT version
public static native String getGwtVersion() /*-{
    return $gwt_version;

From outside the application you can walk the DOM of the page to find the iframe containing the running GWT code and access the version like below.

var gwtVersion = null;
var frames = document.getElementsByTagName('iframe');
for (var i=0; i<frames.length; i++) {
    // prevent security access errors
    try {
        if(frames[i].contentWindow.$gwt_version) {
            gwtVersion = frames[i].contentWindow.$gwt_version;
    catch(e) {}

This is the mechanism I used to detect GWT apps in the Library Detector Chrome Extension (Github). Note the wrapping in a try/catch. This is because some iframes are cross domain and will throw a security exception if you try to access them.

Some other explanations:

Window is a class plenty of static methods, which you can use for getting or setting certain properties of the browser window, but actually it is not the native browser window object. These method implementations are eventually JSNI blocks which use the $wnd variable to set/get those properties. Like Window.alert() whose implementation would be $wnd.alert(). Note that Window.java doesn’t have access for everything in the browser’s window object like window.console etc.

GWT uses $wnd instead of window because compiled code is executed normally in an iframe, and in this context, window will reference the iframe window while $wnd will reference the parent window. The same occurs with $doc which is a reference in the iframe to the parent document.

In the other side Document is a java class which extends JavaScriptObject, it means that it is an Overlaytype which basically means that it is a special wrapper for a native javascript object, it does not modify the underlying JavaScript but adds a set of java methods to interact with it. It can be safely cast when passing to jsni.

In summary, although Document and $doc are not the same in java world, when it is compiled they will be the same, otherwise Window it’s not an overlay of $wnd, it is just a way to access certain methods of the browser window.

Although GWT compiled code delegates to native js objects and methods, don’t try to find similarities between js and java objects. GWT has designed an API to develop ajax applications using a set of java objects, widgets, patterns, etc. Some objects and methods are named in the same way, but almost the API is different. There are though, other projects which compiles java to javascript which has a rigid parallelism between both worlds like ST-JS, and GWT provides an experimental library called Elemental whose API is almost identical to javascript (it’s only available for Chrome).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s