How to pop up an alert box when the browser's refresh button is clicked?

user_388632 0
Viewed 65670

If the user refreshes the page in question it will add another record to the database, so I want to warn the user through an alert box if they really want to refresh the page and if they click ok then the page should be refreshed otherwise if they click cancel it won't be.

How to make this type of alert box appear when the browser's refresh button is clicked in a way that is cross browser compatible?

javascript
6 Answers

All the answers are quite old, as of today 2020, according to HTML specification, you can do it this way.

Important Note: Custom text is not supported in most of the browsers now. (it was supported in older browsers).

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
  // Chrome requires returnValue to be set
  e.returnValue = '';
});
user_29789230

Quoting from official Mozilla site here, It is no longer supported to supply a custom message.

When this event returns (or sets the returnValue property to) a value other than null or undefined, the user will be prompted to confirm the page unload. In older browsers, the return value of the event is displayed in this dialog. Starting with Firefox 44, Chrome 51, Opera 38, and Safari 9.1, a generic string not under the control of the webpage will be shown instead of the returned string. For example:

Firefox displays the string, "This page is asking you to confirm that you want to leave - data you have entered may not be saved." (see bug 588292). Chrome displays the string, "Do you want to leave this site? Changes you made may not be saved." (see Chrome Platform Status).

user_47497120
Related