GWT: Hide address bar on mobile devices

Question

I am trying to hide the address bar of my GWT app on mobile devices. From my mobile code I am calling the JSNI function below, but it doesn't work. Any solution you can think of which doesn't involve JQuery?

public static native void hideBar()
/*-{
    $($doc).ready(function() {
        function hideAddressBar() {
            if($doc.documentElement.scrollHeight < $wnd.outerHeight / $wnd.devicePixelRatio) {
               $doc.documentElement.style.height = ($wnd.outerHeight / $wnd.devicePixelRatio) + "px";
            }
        }

        $wnd.addEventListener("load", function() { hideAddressBar(); });
        $wnd.addEventListener("orientationchange", function() { hideAddressBar(); });
    });
}-*/;

Eliran Malka · Accepted Answer · 2013-06-18T15:43:31.387

Why not make your app fullscreen instead?

You'd have to account for different implementations (webkit vs. gecko prefixes, method naming differs from the W3C standards, etc.), but that seems like the way to go in your case.

Instead of hideAddressBar(), have a goFullScreen(), ruffly doing this:

function goFullScreen() {
    var docElm = $doc.documentElement;
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
}

See Using Fullscreen Mode on MDN, and also Using the fullscreen API in web browsers on hacks.mozilla.org.

Also check out this useful gist from robnyman for a quick get-go.

GWT: Hide address bar on mobile devices

1 Answers1