用户离开或刷新页面时如何自定义对话框消息

Question

I used beforeUnload event listener, but I couldn't get the message I want to be displayed on dialog-box.
Here is my code:

//code//[enter image description here][1]
window.addEventListener('beforeunload', function(event) {
  
  var message = ' customized message ';
  (window.event).returnValue = message;
  return message;
});

Note; can I use preventDefault() method instead return value? I tried with

{event.preventDefault();
   return message;}

But this isn't working.

Answer 1

What you're doing is not wrong, the problem is that not all browsers display the returned message. Prevent default won't help you.

Quoting Mozilla :

Some browsers display the returned string in the dialog box, but others display their own message. If no value is provided, the event is processed silently.

For better cross-browser results, keep appending the message to the event handler and don't just return the message.

window.addEventListener('beforeunload', function (event) {
  var message = ' customized message ';

  event.returnValue = message; // Gecko, Trident, Chrome 34+
  return message;              // Gecko, WebKit, Chrome <34
});