beforeunload

16 March, 2023

Contributors

Milsaware

@milsaware

About

The beforeunload event is triggered when a user is about to leave a page. This event allows developers to perform actions before the page is unloaded, such as prompting the user to confirm that they want to leave the page, or saving unsaved changes to the page.

When a user navigates away from a page, the browser will trigger the beforeunload event before the page is unloaded. If an event listener is attached to this event, it will be executed and can be used to perform any necessary actions before the page is unloaded. For example, you could use the beforeunload event to prompt the user with a message asking if they really want to leave the page, or to save any unsaved changes to the page before they navigate away.

Event listener

Here is an example of how to use the beforeunload event with an event listener:

CSS

.warning-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 2px solid #333;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Example of beforeunload Event</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Example of beforeunload Event</h1>
        <p>This webpage will display a warning message when you try to leave.</p>

        <script src="script.js"></script>
    </body>
</html>

JavaScript

window.addEventListener('beforeunload', function (e) {
    // Cancel the event
    e.preventDefault();

    // Chrome requires returnValue to be set
    e.returnValue = '';

    // Display warning message
    document.querySelector('.warning-message').style.display = 'block';
});

// Hide warning message when user confirms they want to leave
document.querySelector('.warning-message button').addEventListener('click', function () {
    document.querySelector('.warning-message').style.display = 'none';
});

Here, when the user tries to leave the page, a warning message will be displayed in the centre of the screen. The message will have a border, a white background, and a button that says "Stay on this page". If the user clicks the button, the message will be hidden and the user will stay on the page. If the user chooses to leave the page, the warning message will not be displayed, and the user will be redirected to their destination.

The warning message is hidden by default and is only displayed when the beforeunload event is triggered. The event listener function prevents the default behaviour of the event, displays the warning message, and sets the returnValue property of the event object to an empty string. This is necessary to support older browsers like Internet Explorer, which require a returnValue to be set in order to display the warning message. The button in the warning message has its own event listener that hides the message when clicked.

Property

There is an onbeforeunload property that can be used to attach an event listener directly to the beforeunload event. This property can be set on the window object to execute a function when the beforeunload event is triggered:

window.onbeforeunload = function(event) {
    // Prompt the user with a message before they leave the page
    event.returnValue = 'Are you sure you want to leave this page?';
};

Here, the onbeforeunload property is set to a function that prompts the user with a message asking if they are sure they want to leave the page. The event.returnValue property is set to the message, which will be displayed in a dialog box by the browser when the user attempts to leave the page.

Inline

The beforeunload event can be used in inline HTML using the onbeforeunload attribute. For example:

<body onbeforeunload="return 'Are you sure you want to leave?';">
    <h1>Example of beforeunload Event</h1>
    <p>This webpage will display a warning message when you try to leave.</p>
</body>

Here, the onbeforeunload attribute is added to the body tag. This attribute contains JavaScript code that will be executed when the beforeunload event is triggered. In this case, the code returns a string that will be used as the warning message. When the user tries to leave the page, the warning message will be displayed, and the user can choose to stay on the page or leave it.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

The beforeunload event cannot be programmatically triggered. This is a security measure implemented by web browsers to prevent malicious apps from tricking users into staying on a page or unintentionally navigating away from a page.

The beforeunload event is triggered by the browser when the user attempts to leave the page, either by closing the tab or window, navigating to a different page, or typing a new URL in the address bar. When the beforeunload event is triggered, the browser displays a confirmation dialog box with a message and buttons that allow the user to choose whether to stay on the page or leave.

javascript