In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onbeforeunload

onbeforeunload event | beforeunload event

Browser support:

Occurs before the browser unloads the document and provides a possibility to display a confirmation dialog, where the user can confirm whether he wants to stay or leave the current page.

The onbeforeunload event is not cancelable, because of security reasons, but if an event handler function for the onbeforeunload event returns a string value, this text will be shown in a confirmation dialog box, where the user can confirm whether he wants to stay or leave the current page.

Note that event listeners cannot be registered for the onbeforeunload event with the addEventListener and attachEvent methods (only Safari and Google Chrome support it). For a cross-browser solution, register the event handler in HTML (with the onbeforeunload attribute of the body element) or with the onbeforeunload inline event property of the window object. See the examples below for details.

How to register:

In HTML:

In JavaScript:

object.onbeforeunload = handler;

object.addEventListener ("beforeunload", handler, useCapture);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles

Cancelable

Yes

Event object

BeforeUnloadEvent

9

Event

Actions that invoke the onbeforeunload event:

Navigating to another page directly in the browser or via a link.
Closing the current browser window or tab page.
Reloading the current page.
Manipulating the URL of the currently loaded page through the location object from JavaScript.
Invoking the window.navigate method.
Invoking the window.open or the document.open method to open a document in the same window.

The order of events related to the onbeforeunload event:

Action	Event order
Any action that invokes the onbeforeunload event.	onbeforeunload onunload

Example HTML code 1:

This example uses the onbeforeunload attribute of the body element to detect when the page unloads:

<head>
    <script type="text/javascript">
        function OnBeforeUnLoad () {
            return "All data that you have entered will be lost!";
        }
    </script>
</head>
<body onbeforeunload="return OnBeforeUnLoad ()">
    <b>Close this window or press F5 to reload the page.</b>
    <br /><br />
    <form>
        User name: <input type="text" name="username" />
        <br />
        City: <input type="text" name="city" />
    </form>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it uses the onbeforeunload inline event property of the window object to register the event handler:

<head>
    <script type="text/javascript">
        window.onbeforeunload = OnBeforeUnLoad;
        function OnBeforeUnLoad () {
            return "All data that you have entered will be lost!";
        }
    </script>
</head>
<body>
    <b>Close this window or press F5 to reload the page.</b>
    <br /><br />
    <form>
        User name: <input type="text" name="username" />
        <br />
        City: <input type="text" name="city" />
    </form>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

Finally, this example shows that the addEventListener and attachEvent methods cannot be used for the onbeforeunload event (except in Google Chrome and Safari):

<head>
    <script type="text/javascript">
        if (window.addEventListener) {  // all browsers except IE before version 9
            window.addEventListener ("beforeunload", OnBeforeUnLoad, false);
        }
        else {
            if (window.attachEvent) {   // IE before version 9
                window.attachEvent ("onbeforeunload", OnBeforeUnLoad);
            }
        }

            // the OnBeforeUnLoad method will only be called in Google Chrome and Safari
        function OnBeforeUnLoad () {
            return "All data that you have entered will be lost!";
        }
    </script>
</head>
<body>
    <b>Close this window or press F5 to reload the page.</b>
    <br /><br />
    <form>
        User name: <input type="text" name="username" />
        <br />
        City: <input type="text" name="city" />
    </form>
</body>