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 Navigator onLine Property
The HTML navigator.onLine property returns a boolean value that indicates whether the browser is currently online or offline. This property is part of the Navigator interface and provides a simple way to check the network connectivity status of the user's browser.
Syntax
Following is the syntax for the navigator onLine property −
navigator.onLine
Return Value
The navigator.onLine property returns −
true− If the browser is online (connected to the internet)false− If the browser is offline (not connected to the internet)
Basic Usage Example
Following example demonstrates the basic usage of the navigator onLine property −
<!DOCTYPE html>
<html>
<head>
<title>Navigator onLine Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Online Status</h2>
<button onclick="checkStatus()">Check Browser Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var resultElement = document.getElementById("result");
if (navigator.onLine) {
resultElement.innerHTML = "Browser is currently <strong>ONLINE</strong>";
resultElement.style.color = "green";
} else {
resultElement.innerHTML = "Browser is currently <strong>OFFLINE</strong>";
resultElement.style.color = "red";
}
}
</script>
</body>
</html>
The output displays the current online status when the button is clicked −
Browser is currently ONLINE (in green text) or Browser is currently OFFLINE (in red text)
Real-Time Status Monitoring
You can also monitor online/offline status changes in real-time using the online and offline events. This approach automatically detects when the network status changes without requiring user interaction.
Example
<!DOCTYPE html>
<html>
<head>
<title>Real-time Status Monitor</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Network Status Monitor</h2>
<div id="status"></div>
<p>Try disconnecting/connecting your internet to see real-time updates.</p>
<script>
function updateStatus() {
var statusDiv = document.getElementById("status");
if (navigator.onLine) {
statusDiv.innerHTML = "? You are ONLINE";
statusDiv.style.backgroundColor = "#d4edda";
statusDiv.style.color = "#155724";
} else {
statusDiv.innerHTML = "?? You are OFFLINE";
statusDiv.style.backgroundColor = "#f8d7da";
statusDiv.style.color = "#721c24";
}
statusDiv.style.padding = "15px";
statusDiv.style.borderRadius = "5px";
statusDiv.style.fontWeight = "bold";
statusDiv.style.textAlign = "center";
}
// Check status on page load
updateStatus();
// Listen for online/offline events
window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);
</script>
</body>
</html>
This example automatically updates the display when the network status changes, showing a green background for online and red background for offline status.
Practical Application
Following example shows a practical use case where different content is displayed based on the connection status −
<!DOCTYPE html>
<html>
<head>
<title>Connection-Aware Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Connection-Aware Web App</h2>
<div id="content"></div>
<script>
function loadContent() {
var contentDiv = document.getElementById("content");
if (navigator.onLine) {
contentDiv.innerHTML = `
<h3>Online Features Available</h3>
<ul>
<li>Live data synchronization</li>
<li>Cloud backup enabled</li>
<li>Real-time collaboration</li>
</ul>
<button style="background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
Sync Data
</button>
`;
} else {
contentDiv.innerHTML = `
<h3>Offline Mode</h3>
<ul>
<li>Working with cached data</li>
<li>Changes saved locally</li>
<li>Will sync when online</li>
</ul>
<button style="background: #6c757d; color: white; padding: 10px 20px; border: none; border-radius: 5px;" disabled>
Sync Unavailable
</button>
`;
}
}
// Load content based on current status
loadContent();
// Update content when status changes
window.addEventListener('online', loadContent);
window.addEventListener('offline', loadContent);
</script>
</body>
</html>
This example demonstrates how web applications can adapt their interface and functionality based on the user's connectivity status.
Browser Compatibility and Limitations
The navigator.onLine property is supported by all modern browsers. However, it has some limitations −
It only indicates if the browser has a network connection, not if it has internet access
A device connected to a local network without internet access will still return
trueDifferent browsers may have slightly different interpretations of "online"
Conclusion
The navigator.onLine property is a useful tool for detecting network connectivity in web applications. Combined with online/offline event listeners, it enables developers to create responsive applications that adapt to changing network conditions and provide appropriate user feedback when connectivity is lost or restored.
260 Views
