Clicking "cancel" on "Reload site?" in chrome refreshes the page

Question

I have this simple code that displays when user leaves or refreshes the page

<script>
        var buttonClicked = false;

        window.onbeforeunload = function () {
            if (buttonClicked) {
                buttonClicked = false;
            }
            else {
                return "WARNING";
            }
        };
</script>

The buttonClicked is true if user clicks on Next and the warning does not display.

When you click on reload, this warning still displays as expected, but clicking cancel still refreshes the page, losing all data entered in the form. This only happens in Google Chrome 77. I tried it on Firefox and Edge and this does not happen.

Strangely, when DevTools are open, Chrome does not refresh the page.

Is this a bug on there is something on my end that I got wrong?

have you tried running chrome 77 without any extensions? Some adblock extensions tend to prevent the page from canceling the reload page event. — Olian04, Sep 17 '19 at 14:05
@Olian04 Yes, I use other Chrome profile for debugging without any extensions. — KireK, Sep 18 '19 at 07:49

score 0 · Answer 1 · answered Sep 18 '19 at 08:23

According to the MDN docs:

According to the specification, to show the confirmation dialog an event handler should call preventDefault() on the event.

However note that not all browsers support this method, and some instead require the event handler to implement one of two legacy methods:

assigning a string to the event's returnValue property

returning a string from the event handler.

It would seem like the official spec want's you to call Event#preventDefault. However some older browsers might not respect this and require the event handler to either return a string or set the returnValue property of the event.

 const $preventReload = document.getElementById('prevent_reload');
 
 window.onbeforeunload = (ev) => {
  if ($preventReload.checked) {
    ev.preventDefault();
    ev.returnValue = 'prevented';
    return 'prevented';
  }
 }

<lable for="prevent_reload">Prevent reload</lable> <input id="prevent_reload" type="checkbox" />
<button onclick="location.reload()">Reload page!</button>

It's therefor likely that the latest version of chrome (chrome 77) removed support for the latter two options and opted for only supporting the official spec.

While this and my code should work, they don't. Thing is, the pop up still shows, but page is already refreshed. Clicking OK or Cancel basicly does the same thing. — KireK, Sep 18 '19 at 10:09
@KireK hmm, that's strange. Because i just tried it on chrome 77, and it works for me. `Version 77.0.3865.75 (Official Build) (64-bit)` for linux. If you're on another OS, then it might indeed be a bug in chrome. — Olian04, Sep 18 '19 at 10:50

PhaZe Niarb · Answer 2 · 2019-09-17T14:43:13.187

-1

Try using something like this:

<script>
        var buttonClicked = false;

        window.onbeforeunload = function () {
            if (buttonClicked) {
                buttonClicked = false;
            }
            else {
                var answer = confirm("WARNING");
                if (answer)
                {
                  //code for when user leaves
                  alert("bye");
                }
                else
                {
                  window.location = "http://www.example.com";
                }
            }
        };
</script>

This should ask the user if they want to leave the page when they exit.

Source: JavaScript before leaving the page

edited Sep 17 '19 at 14:43

answered Sep 17 '19 at 14:34

PhaZe Niarb

16
3

Please also describe how this code helps the OP's problem. – Yash Sep 17 '19 at 14:37
I believe this is outdated and does not work anymore (just tried it just in case). Also it does not help in this situation. – KireK Sep 18 '19 at 07:54
According to the MDN docs: `The HTML specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event.`. In other words, using `alert` as part of the logic in the `beforeunload` event is not to be relied upon. – Olian04 Sep 18 '19 at 08:33

Clicking "cancel" on "Reload site?" in chrome refreshes the page

2 Answers2