prompt user on backspace and browser backbutton in gwt

Question

I have two classes when navigating from one class to another created history. Now, I want to prompt the user by a confirm whether user wants to leave the page or not.Till now , I tried using Window.closingHandler() in gwt but its not working for backspace button and browser back button its only working on closing the entire browser or that particular page using cross. Its also working on reload.

I have also tried on Javascript and it worked perfect using onbeforeunload().

Here are the codes I used.

JAVASCRIPT:

window.onbeforeunload = function () {
  return "Are you sure you wish to leave this delightful page?";
}

And the other code in gwt:

Window.addWindowClosingHandler(new Window.ClosingHandler() {
    public void onWindowClosing(ClosingEvent event) {
        event.setMessage("Do you wanna close?");
        System.out.println("Closing...");
    }
});

I want it to be done in gwt.

Answer 1

Have you tried with History.addValueChangeHandler which listens for changes in the browser's history stack?

---

-- EDIT --

Below code is working fine for Backspace key in Firefox, Chrome as well as IE9.

Note: Please test it for other browsers also and let me know if there is any issue.

    Event.addNativePreviewHandler(new Event.NativePreviewHandler() {

        @Override
        public void onPreviewNativeEvent(final NativePreviewEvent event) {
            boolean isFirefox = checkBrowser("Firefox");
            if ((isFirefox && event.getTypeInt() == Event.ONKEYPRESS)
                    || (!isFirefox && event.getTypeInt() == Event.ONKEYDOWN)) {
                if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_BACKSPACE) {
                    Element element = Element.as(event.getNativeEvent().getEventTarget());

                    String tagName = element.getTagName();

                    System.out.println(tagName);

                    if (!tagName.equalsIgnoreCase("INPUT")
                            && !tagName.equalsIgnoreCase("TEXTAREA")) {

                        boolean result = Window.confirm("Are you sure?");
                        if (!result) {
                            event.cancel();
                        }
                    }
                }
            }
        }
    });

    if (checkBrowser("Firefox")) {
        DOM.sinkEvents(RootPanel.get().getElement(), Event.ONKEYPRESS);
    } else {
        DOM.sinkEvents(RootPanel.get().getElement(), Event.ONKEYDOWN);
    }

....

private static boolean checkBrowser(String browserName) {
    return (Window.Navigator.getUserAgent().toLowerCase().indexOf(browserName.toLowerCase()) != -1);
}

-- EDIT --

Here is the code detect browser Back button also. For more info have a look at

How to know whether refresh button or browser back button is clicked in firefox

public native void onBeforeUnload()/*-{

    $wnd.onbeforeunload = function(e) {
        return 'Are you sure?';
    };
}-*/;

public void onModuleLoad() {

    onBeforeUnload();

}

screenshots (browser back button is clicked or page is refreshed)

Please have a look at below posts:

• GWT back button browser
• Best way to detect browser closing/navigation to other page and do logout

Answer 2

I have got this in JSNI, But its also not working in browser back button..

public native void call()/*-{

    $wnd.onkeypress = GetChar;

     function GetChar (event)
     {
        var key = event.keyCode;

        var bb = event.target.nodeName;

             if(key==8 && bb=="BODY")
                {
                    var x= window.confirm("Are you sureyou want to leave the page");

                    if (x==true)
                            {
                                window.history.back();
                            }
                    else if(x==false)
                            {

                                return false;
                            }
                }
        }                   
}-*/;