How can I override the OnBeforeUnload dialog and replace it with my own?

Question

I need to warn users about unsaved changes before they leave a page (a pretty common problem).

window.onbeforeunload=handler

This works bu

Answer 1

Angular 9 approach:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

Browsers support and the removal of the custom message:

• Chrome removed support for the custom message in ver 51 min
• Opera removed support for the custom message in ver 38 min
• Firefox removed support for the custom message in ver 44.0 min
• Safari removed support for the custom message in ver 9.1 min