How and why does onbeforeunload work

Yesterday, in bugzilla mozilla.org with WONTFIX resolution, they closed bug No. 641509 “onbeforeunload event doesn’t display the text-only text, only standard message”, judging by the comments, finally and irrevocably. In this regard, I wanted to write a little about the background.

Many people know that thanks to onbeforeunload, you can ask the user not to leave the web page if he has unsaved data (for example, written in a form, but not sent a message to the forum). To do this, just add something like this JavaScript:

window.onbeforeunload = function (evt) { var message = "Document 'foo' is not saved. You will lost the changes if you leave the page."; if (typeof evt == "undefined") { evt = window.event; } if (evt) { evt.returnValue = message; } return message; } 

After that, ideally, if the user wishes to leave the page (in any way - close the tab, the entire browser, reload the page, enter the new address in the address bar, go to the bookmark, etc.), he will see a confirmation request and you can cancel the page . Previously, dishonest site authors tried using this window to outwit the user and delay it on the page, for example, using the text “Click OK to continue working with the site and Cancel to close” (in fact, the buttons worked the other way around). Or even something more terrible, for example, "Click OK to confirm the withdrawal of $ 1000 from your credit card."

Then browsers have become smarter and began to write auxiliary text that makes it more difficult to deceive the user. For example, as IE8 does:

Almost the same text was in Firefox 3:

If you read it all, it becomes clear that the site reported, and that - the browser. However, you can still cheat.

The authors of Safari and Chrome did the right thing. In these browsers, the windows look like this:

')

Here we see a clear description of the actions right on the buttons. It is already very difficult to convince the user to click “Leave” to stay and “Stay” to leave. In my opinion, the solution is perfect and you can close this topic. In general, as is known, the faceless OK in almost any dialog should be replaced with the name of the action (for example, "Delete files", "Search", "Add line", "Open file", etc.), this reduces the number of user errors, even if you fully control the text of the dialogue.

What was the drama with the bug 641509? The fact that this confirmation in Firefox 4 and higher looks like this:

As you can see, the custom text has disappeared altogether. Since version 4, the website cannot inform the user of any additional message and explain why he does not specifically want the user to leave. Say, if you implement an interface for working with many documents in one window, and one of them is not saved, you could say which one, but you don’t understand this in Firefox. Perhaps you don’t want to save it and see the message, you would easily leave the page, and you don’t know what it is. In the sheet of comments to the bug you will find many other examples of disgruntled web programmers about what they would like to say to the user in this window.

The Firefox team explains its decision by saying that if a web page has to explain why it doesn’t let the user go, then this is a bad web page. It remains an open question whether this is always true and whether it is generally the case of the browser to prohibit bad web pages from working. This is not a question of a thousand pop-ups with pornos. One way or another, website authors should remember that the user, if he is using Firefox, may not see the message that you show him.

You ask why I did not mention the Opera? And there is no window in it at all. The page closes silently. According to the developers, Opera consciously does not support the onbeforeunload event.