DEV Community

loading...

Alert when user leaves the web page

phongduong profile image Phong Duong Originally published at phongduong.dev on ・1 min read

To know when users leave the web page, you listen to beforeunload. This event is fired before the window is unloaded.

It is because of the browser's support. In the event handler, you can call preventDefault() on the event, assign a string to the event's returnValue property and return a string. You should combine these methods if your web page runs on multiple browsers.

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '';
});
Enter fullscreen mode Exit fullscreen mode

When the user tries to leave the page like refreshing, closing the tab, or going back, it is going to show a confirm dialog.

Discussion (0)

pic
Editor guide