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
Execute a script when the browser starts to work online in HTML?
The ononline event attribute in HTML executes a JavaScript function when the browser detects that it has regained internet connectivity. This event is fired when the browser transitions from offline to online mode, making it useful for handling network state changes in web applications.
Syntax
Following is the syntax for the ononline attribute −
<body ononline="functionName()">
The ononline attribute is typically used on the <body> element and calls a JavaScript function when the browser goes online.
How It Works
The browser monitors network connectivity and fires the online event when:
The user reconnects to the internet after being offline
The browser detects network availability has been restored
The user manually switches from "Work Offline" mode to online mode
The complementary onoffline attribute handles the opposite scenario when the browser goes offline.
Example − Basic Online Detection
Following example demonstrates how to detect when the browser goes online −
<!DOCTYPE html>
<html>
<head>
<title>Online Detection Example</title>
</head>
<body ononline="onlineFunc()" onoffline="offlineFunc()" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Network Status Monitor</h2>
<p id="status">Current status: Online</p>
<p>Go to your browser menu and select "Work Offline" to test the offline detection, then go online again.</p>
<script>
function onlineFunc() {
document.getElementById("status").innerHTML = "Current status: <span style='color: green;'>Online</span>";
alert("Working online!");
}
function offlineFunc() {
document.getElementById("status").innerHTML = "Current status: <span style='color: red;'>Offline</span>";
alert("Working offline!");
}
</script>
</body>
</html>
When you toggle between online and offline modes in your browser, the status text updates and an alert appears −
Network Status Monitor Current status: Online (in green when online, red when offline) Go to your browser menu and select "Work Offline" to test...
Example − Advanced Network Status Handler
Following example shows a more comprehensive approach to handling network status changes −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Network Handler</title>
<style>
.status-box {
padding: 15px;
margin: 10px 0;
border-radius: 5px;
text-align: center;
font-weight: bold;
}
.online { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.offline { background-color: #f8d7da; color: #721c24; border: 1px solid #f1aeb5; }
</style>
</head>
<body ononline="handleOnline()" onoffline="handleOffline()" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Network Connection Monitor</h2>
<div id="statusBox" class="status-box online">
? Connected to Internet
</div>
<p id="timestamp">Last checked: Page loaded</p>
<button onclick="checkStatus()">Check Current Status</button>
<script>
function handleOnline() {
const statusBox = document.getElementById("statusBox");
const timestamp = document.getElementById("timestamp");
statusBox.className = "status-box online";
statusBox.innerHTML = "? Connected to Internet";
timestamp.innerHTML = "Last online: " + new Date().toLocaleTimeString();
}
function handleOffline() {
const statusBox = document.getElementById("statusBox");
const timestamp = document.getElementById("timestamp");
statusBox.className = "status-box offline";
statusBox.innerHTML = "? No Internet Connection";
timestamp.innerHTML = "Went offline: " + new Date().toLocaleTimeString();
}
function checkStatus() {
if (navigator.onLine) {
alert("Currently online");
} else {
alert("Currently offline");
}
}
</script>
</body>
</html>
This example provides visual feedback with colored status boxes and timestamps. The "Check Current Status" button uses navigator.onLine to manually check connectivity.
Using Event Listeners as Alternative
Instead of HTML attributes, you can use JavaScript event listeners for more flexibility −
<!DOCTYPE html>
<html>
<head>
<title>Event Listener Approach</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Network Status with Event Listeners</h2>
<div id="messages"></div>
<script>
function addMessage(text, isOnline) {
const messages = document.getElementById("messages");
const div = document.createElement("div");
div.style.padding = "10px";
div.style.margin = "5px 0";
div.style.borderRadius = "3px";
div.style.color = isOnline ? "#155724" : "#721c24";
div.style.backgroundColor = isOnline ? "#d4edda" : "#f8d7da";
div.innerHTML = text + " - " + new Date().toLocaleTimeString();
messages.appendChild(div);
}
// Add event listeners
window.addEventListener('online', function() {
addMessage("Browser is now online", true);
});
window.addEventListener('offline', function() {
addMessage("Browser is now offline", false);
});
// Initial status
addMessage("Page loaded - Status: " + (navigator.onLine ? "Online" : "Offline"), navigator.onLine);
</script>
</body>
</html>
This approach logs network status changes with timestamps, providing a history of connectivity events.
Browser Compatibility
The ononline and onoffline events are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The navigator.onLine property is also widely supported for checking current connectivity status.
Key Points
The
ononlineevent only detects browser connectivity, not actual internet accessNetwork detection may not be immediate in all browsers
Use
navigator.onLineto check current connectivity statusCombine with
onofflinefor complete network state handlingEvent listeners provide more flexibility than HTML attributes
Conclusion
The ononline attribute provides a simple way to execute scripts when the browser regains internet connectivity. Combined with onoffline, it enables responsive web applications that can adapt to network status changes and provide better user experiences during connectivity issues.
168 Views
