Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What is the usage of the onbeforeunload event in JavaScript?
The onbeforeunload event triggers when a user attempts to leave the page, such as closing the tab, refreshing, or navigating to another URL. It's commonly used to warn users about unsaved changes.
Syntax
window.onbeforeunload = function(event) {
// Return a string to show confirmation dialog
return "Your message here";
};
// Or using addEventListener
window.addEventListener('beforeunload', function(event) {
event.preventDefault();
event.returnValue = '';
});
Example: Basic Implementation
<!DOCTYPE html>
<html>
<head>
<title>onbeforeunload Example</title>
</head>
<body>
<h2>Try to close this tab or navigate away</h2>
<a href="https://www.google.com">Click to navigate away</a>
<script>
window.onbeforeunload = function() {
return "Are you sure you want to leave? Changes may not be saved.";
};
</script>
</body>
</html>
Example: Conditional Warning
<!DOCTYPE html>
<html>
<head>
<title>Conditional onbeforeunload</title>
</head>
<body>
<h2>Edit the text below</h2>
<textarea id="userInput" placeholder="Type something here..."></textarea>
<br><br>
<button onclick="saveData()">Save Changes</button>
<a href="https://www.google.com">Navigate Away</a>
<script>
let hasUnsavedChanges = false;
document.getElementById('userInput').addEventListener('input', function() {
hasUnsavedChanges = true;
});
function saveData() {
hasUnsavedChanges = false;
alert('Data saved!');
}
window.onbeforeunload = function() {
if (hasUnsavedChanges) {
return "You have unsaved changes. Are you sure you want to leave?";
}
};
</script>
</body>
</html>
Key Points
- Browser Control: Modern browsers show generic messages, ignoring custom text for security reasons
-
Return Value: Any non-empty string or setting
event.returnValuetriggers the dialog - User Gesture Required: Some browsers require user interaction before showing the dialog
- Mobile Limitations: May not work consistently on mobile browsers
Common Use Cases
| Use Case | Example |
|---|---|
| Form Data Protection | Warn when leaving with unsaved form inputs |
| Text Editors | Prevent accidental loss of document changes |
| Online Games | Warn about losing game progress |
| Shopping Carts | Alert about items in cart before leaving |
Browser Compatibility
The onbeforeunload event is supported in all major browsers, but behavior varies:
- Chrome/Firefox: Show generic "Leave site?" message
- Safari: May show custom message text
- Edge: Similar to Chrome behavior
Conclusion
Use onbeforeunload to prevent accidental data loss when users navigate away. Remember that modern browsers control the actual message shown to users for security purposes.
Updated on: 2026-03-15T23:18:59+05:30
214 Views
Advertisements