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
HTML ononline Event Attribute
The HTML ononline event attribute is triggered when the browser detects that the device has regained an internet connection. This event is useful for applications that need to respond when network connectivity is restored, such as syncing data or updating the user interface.
Syntax
Following is the syntax for the ononline event attribute −
<body ononline="script">Content</body>
The script parameter can be a JavaScript function call or inline JavaScript code that executes when the online event is triggered.
How It Works
The ononline event is fired on the <body> element when the browser's navigator.onLine property changes from false to true. This typically happens when −
-
Network connection is restored after being lost
-
WiFi is reconnected
-
Ethernet cable is plugged back in
-
Mobile data connection is re-established
The ononline event is commonly used together with the onoffline event to create responsive applications that handle network connectivity changes gracefully.
Example
Following example demonstrates the ononline event attribute with visual feedback −
<!DOCTYPE html>
<html>
<head>
<title>HTML ononline Event Attribute</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
.status {
padding: 15px;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
margin: 20px 0;
}
.online {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.offline {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body ononline="onlineFn()" onoffline="offlineFn()">
<h1>Network Status Monitor</h1>
<p>Try disconnecting and reconnecting your internet connection.</p>
<div id="status" class="status">Connection status will appear here</div>
<script>
function onlineFn() {
document.getElementById("status").innerHTML = "? You are back online!";
document.getElementById("status").className = "status online";
}
function offlineFn() {
document.getElementById("status").innerHTML = "? You are offline";
document.getElementById("status").className = "status offline";
}
// Check initial status
if (navigator.onLine) {
onlineFn();
} else {
offlineFn();
}
</script>
</body>
</html>
The output shows a status indicator that updates when network connectivity changes −
Network Status Monitor Try disconnecting and reconnecting your internet connection. ? You are back online! (green background when online) ? You are offline (red background when offline)
JavaScript Event Listener Alternative
Instead of using the HTML attribute, you can also attach the online event using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Online Event with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Connection Status</h2>
<p id="message">Monitoring network status...</p>
<script>
window.addEventListener('online', function() {
document.getElementById('message').innerHTML = 'Connected to internet!';
document.getElementById('message').style.color = 'green';
});
window.addEventListener('offline', function() {
document.getElementById('message').innerHTML = 'No internet connection';
document.getElementById('message').style.color = 'red';
});
// Display initial status
if (navigator.onLine) {
document.getElementById('message').innerHTML = 'Currently online';
document.getElementById('message').style.color = 'green';
} else {
document.getElementById('message').innerHTML = 'Currently offline';
document.getElementById('message').style.color = 'red';
}
</script>
</body>
</html>
This approach provides the same functionality but uses modern JavaScript event handling methods.
Common Use Cases
The ononline event is commonly used for −
-
Data synchronization − Automatically sync pending changes when connection is restored
-
User notifications − Inform users about connectivity status
-
Feature enabling − Re-enable online-only features when connection returns
-
Background tasks − Resume background processes that require internet
Browser Compatibility
The ononline event attribute is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, the reliability of network detection may vary across different browsers and operating systems.
Note − The online/offline detection depends on the browser's ability to reach the internet, not just local network connectivity. Some browsers may show false positives when connected to a local network without internet access.
Conclusion
The HTML ononline event attribute provides a simple way to detect when internet connectivity is restored. It's particularly useful for creating responsive web applications that need to handle network status changes and provide appropriate user feedback or functionality based on connection availability.
185 Views
