In this article we will learn how to use BOM Navigation in JavaScript. In JavaScript, the navigator.onLine property is a boolean that indicates whether the browser is currently online or offline.
When navigator.onLine is true, it means that the browser has a network connection and is able to communicate with the internet. When navigator.onLine is false, it means that the browser is offline and is not able to communicate with the internet.
Here's an example of how to use the navigator.onLine property in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>TutorialsTrend - BOM Navigation Object Examples</h2>
<p id="statusid"></p>
<script>
const statusElement = document.getElementById("statusid");
if (navigator.onLine) {
statusElement.textContent = "You are currently online.";
} else {
statusElement.textContent = "You are currently offline.";
}
// Attaching event handler for the online event
window.addEventListener("online", () => {
statusElement.textContent = "we're back Now!";
});
// Attaching event handler for the offline event
window.addEventListener("offline", () => {
statusElement.textContent = "it looks like you're offline.";
});
</script>
</body>
</html>
Output