Javascript: when is onbeforeunload triggered?

Question

I'm adding a "confirm that you want to leave" dialogue to my website and am experiencing a strange behaviour of the onbeforeunload event.

The docs are pretty clear: If your page is about to be unloaded, this event is called. When your eventHandler returns a string, the user is asked for confirmation. Depending on the browser, the string may be displayed to him.

But in a small sample website, I noticed that beforeunload is only actually fired if the user somehow interacted with the website. This is my test setup:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script type="text/javascript"> window.onload = function () { $("#placeholder").text("website loaded") window.onbeforeunload = function () { return "Reloading the page will reset the survey!"; } } </script> </head> <body> <p id='placeholder'></p> </body> </html>

When the window is loaded, the paragraph text is changed and an eventHandler for beforeunload is registered. If I load this in Firefox, the paragraph is immediately changed.

But if I close the tab or reload it, no confirmation is asked. The confirmation dialogue is only displayed if I have clicked in the website. Switching tabs back and forth is not enough, waiting for ca 10s is not enough.

The behaviour is the same in chrome.

Once I have clicked in the website, the confirmation is always asked. I can have another tab focused and close this example (by right-click and "close tab"), it asks for confirmation. Or another tab is focused and I try to close the browser, it asks for confirmation.

What is happening here, how can I make sure that the event is always fired before the site is unloaded ?

Here is a video:

Have you tried not wrapping onbeforeunload in onload and seeing if there is a difference? — imvain2
– imvain2, Commented Mar 7, 2019 at 16:15
just did. If I remove the onload, $ no longer works, so the paragraph is not changed. But the unloading behaviour is the same — lhk
– lhk, Commented Mar 7, 2019 at 16:20
You said it yourself: "Depending on the browser, the string may be displayed to him." There is no guarantee. Apparently this browser decided that if a user didn't interact with the page, that there probably won't be a good reason for the page to block the user from going away. — GolezTrol
– GolezTrol, Commented Mar 7, 2019 at 16:23
No that's something different. The string can be the message displayed when it asks for confirmation - or not. The browser can also display its own message text. But if there is a handler, it should ask for confirmation — lhk
– lhk, Commented Mar 7, 2019 at 16:24

GolezTrol · Accepted Answer · 2019-03-07 16:27:21Z

The event fires, but the confirmation may not be shown. From the MDN:

Note: To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.

Collectives™ on Stack Overflow

Javascript: when is onbeforeunload triggered?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related