Message for quitting a page only working with Edge and not Chrome and Firefox

Question

I am currently working on a website and there is a page with a form. When the user tries to leaves this page, I want a confirmation message to show up. This is how I did it:

In the JSP file (the website is made with Struts2):

<body onbeforeunload="return onUnload()">

The JavaScript code:

function onUnload() {
        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

        if (formSubmitting) {
            return undefined;
        }
        return confirmationMessage;
    }

This works fine if you try to reload the page or click on a link, but if you try to enter the form and then click on the back button of the browser, Firefox and Chrome return to the previous page without displaying the message. The only good guy here is Edge, who displays the message as expected.

Also, if I click the back button after I tried to leave the page via a link or tried to reload the page, the message is displayed in all the browsers.

I usually don't do software development, which might explain why I don't understand why these three browsers don't behave the same way here. So, some help from you guys is welcome.

EDIT: I don't want to detect the back button. All I want is for the browser to show the confirmation message when the user leaves the page, which right now does not happen if he clicks the back button.

[this](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#Examples) might be a more modern way of doing this but YMMV in getting custom prompts to show. — Gavin, Nov 21 '19 at 14:37
Ok, now it works on Chrome and Edge. But Firefox is still not displaying the message :( — Gaëtan, Nov 21 '19 at 14:48
You can do this by the "old way" (which is the simplest) : `` '̀ — Flo, Nov 21 '19 at 15:24
https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser — cwallenpoole, Nov 21 '19 at 15:25
Possible duplicate of [detect back button click in browser](https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser) — cwallenpoole, Nov 21 '19 at 15:25

score 0 · Answer 1 · answered Nov 22 '19 at 03:02

Try to use the following code (I have tested it on Chrome, Microsoft Edge, and Firefox, they all display the confirmation):

<script>
    var formSubmitting = false;
    var setFormSubmitting = function () { formSubmitting = true; };

    window.onload = function () {
        window.addEventListener("beforeunload", function (e) {
            if (formSubmitting) {
                return undefined;
            }

            var confirmationMessage = 'It looks like you have been editing something. '
                + 'If you leave before saving, your changes will be lost.';

            (e || window.event).returnValue = confirmationMessage; //Gecko + IE
            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
        });
    };
</script>
<form method="post" onsubmit="setFormSubmitting()">
    <table>
        <tr>
            <td>
                Usuario:
            </td>
            <td>
                <input name="Usuario" id="" style="height:22px; width:102px" type="text" maxlength="11" value="aaa" />
            </td>
        </tr>
        <tr>
            <td>
                Senha:
            </td>
            <td>
                <input name="Senha" id="" style="height:22px; width:102px" type="password" maxlength="10" value="123456" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input name="Submit" id="" type="button" value="Submit" onclick="javascript: alert(document.getElementsByName('Usuario')[0].value + ' - ' + document.getElementsByName('Senha')[0].value);" />
            </td>
        </tr>
    </table>
</form>

More detail information, please refer Warn user before leaving web page with unsaved changes.

Message for quitting a page only working with Edge and not Chrome and Firefox

1 Answers1