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
How to detect whether the browser is online or offline with JavaScript?
JavaScript provides the navigator.onLine property to detect whether the browser is online or offline. This property returns true when connected to the internet and false when offline.
The navigator.onLine Property
The navigator.onLine property is a read-only boolean that indicates the browser's online status:
// Basic syntax
if (navigator.onLine) {
// Browser is online
} else {
// Browser is offline
}
Example: Manual Check
<!DOCTYPE html>
<html>
<body>
<h1>Online/Offline Status Checker</h1>
<button onclick="checkOnlineOffline()">Check Status</button>
<h2 id="status"></h2>
<script>
function checkOnlineOffline() {
const statusElement = document.getElementById('status');
if (navigator.onLine === true) {
statusElement.innerHTML = "? You are connected to the internet";
statusElement.style.color = "green";
} else {
statusElement.innerHTML = "? You are not connected to the internet";
statusElement.style.color = "red";
}
}
</script>
</body>
</html>
Example: Automatic Detection with Events
JavaScript also provides online and offline events that fire when the connection status changes:
<!DOCTYPE html>
<html>
<body>
<h1>Automatic Status Detection</h1>
<div id="status">Checking connection...</div>
<script>
function updateStatus() {
const statusElement = document.getElementById('status');
if (navigator.onLine) {
statusElement.innerHTML = "? Online";
statusElement.style.color = "green";
} else {
statusElement.innerHTML = "? Offline";
statusElement.style.color = "red";
}
}
// Check status on page load
updateStatus();
// Listen for connection changes
window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);
</script>
</body>
</html>
Available Events
| Event | Triggered When | Usage |
|---|---|---|
online |
Browser goes online | window.addEventListener('online', handler) |
offline |
Browser goes offline | window.addEventListener('offline', handler) |
Practical Use Cases
<!DOCTYPE html>
<html>
<body>
<h1>Connection Status Handler</h1>
<div id="messages"></div>
<script>
function showMessage(message, type) {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML = `<p style="color: ${type === 'online' ? 'green' : 'red'}">${message}</p>`;
}
window.addEventListener('online', function() {
showMessage('Connection restored! You can continue browsing.', 'online');
});
window.addEventListener('offline', function() {
showMessage('No internet connection. Please check your network.', 'offline');
});
// Initial status
if (navigator.onLine) {
showMessage('Connected to internet', 'online');
} else {
showMessage('No internet connection', 'offline');
}
</script>
</body>
</html>
Browser Compatibility
The navigator.onLine property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, it only detects network connectivity, not actual internet access.
Conclusion
Use navigator.onLine for basic connectivity detection and combine it with online/offline events for real-time status updates. This helps create better user experiences in web applications.
483 Views
