HTML onbeforeunload Event Attribute

Description

The onbeforeunload HTML event attribute specifies a function that will be executed when the document is about to be unloaded. This event is fired when the user navigates away from the page, closes the browser window, or reloads the page.

The onbeforeunload event can be used to prevent the user from leaving the page if they have unsaved changes, or to display a confirmation dialog box to ask the user if they really want to leave.

To use the onbeforeunload event, you simply need to add the attribute to the body tag of your HTML document, and specify the name of the function that you want to be executed when the event is fired.

For example, the following code will display a confirmation dialog box to the user when they try to leave the page:

<body onbeforeunload="return confirm('Are you sure you want to leave this page?');">

The confirm() function displays a dialog box with the specified message. If the user clicks "OK", the function returns true, and the page is unloaded. If the user clicks "Cancel", the function returns false, and the page is not unloaded.

You can also use the preventDefault() method on the event object to prevent the page from being unloaded. For example, the following code will prevent the page from being unloaded if the user has unsaved changes:

<body onbeforeunload="event.preventDefault();">

It is important to note that the onbeforeunload event can be canceled by the browser for various reasons, such as if the user is navigating to a different domain, or if the browser is closing due to a low battery.

Here are some examples of how the onbeforeunload event can be used:

To prevent the user from leaving a page if they have unsaved changes to a form.
To display a confirmation dialog box to the user when they try to close a browser window that contains multiple tabs.
To prompt the user to save a file that they have been editing before they leave the page.
To track how long a user spends on a page.

Here are some things to keep in mind when using the onbeforeunload event:

The onbeforeunload event can be annoying to users if it is used too frequently.
The event can be canceled by the browser for various reasons.
The event should be used sparingly and only for important purposes.

Syntax

<element onbeforeunload="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Event attribute onbeforeunload</title>

</head>

<body onbeforeunload="myFunction()">

<p>Close this window, press F5 or click on the link below to trigger an event for onbeforeunload.</p>

<a href="https://www.cssportal.com">Go to CSSPortal.com</a>

<script>

function myFunction() {

    return "Are you sure you want to leave this page?";

}

</script>

</body>

</html>