How to Implement Confirmation Before Page Exit with JavaScript?

JavaScript Confirmation before Page Exit

To prevent users from accidentally leaving a page without confirmation, you can implement a confirmation window using JavaScript.

Using onbeforeunload

The onbeforeunload event fires when a user is about to leave the page. Code placed in this event listener will display a confirmation window to the user. If the user selects "OK," it indicates their intent to leave, while selecting "Cancel" will interrupt the exit process. You cannot redirect the user if they select to stay on the page.

window.onbeforeunload = function() {
  return 'Are you sure you want to leave?';
};

Using jQuery

jQuery provides a simplified method to handle the beforeunload event:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Using onunload

While the onunload event is often used for cleanup tasks before a page is unloaded, it cannot redirect the user. However, it can still be useful for displaying a farewell message or warning. Note that Chrome 14 and later block alerts within onunload.

window.onunload = function() {
    alert('Bye.');
}

jQuery Implementation

$(window).unload(function(){
  alert('Bye.');
});

The above is the detailed content of How to Implement Confirmation Before Page Exit with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!