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
<!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>
Browser Support
The following table will show you the current browser support for the HTML onbeforeunload
Event Attribute.
Desktop | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023