Is there any possible way to check the internet connection for each and every time of submission in JavaScript?
4 Answers
You can use navigator.onLine
to check the either there is internet connection or not. You can also use 2 event listener to notify when network connection is connected or disconnected.
console.log(navigator.onLine);
// OR
window.addEventListener('online', () => {
//console.log('Online');
});
window.addEventListener('offline', () => {
//console.log('Offline');
});
-
console.log(navigator.onLine)
is working. Butwindow.addEventListener
is not working. Commented Oct 3, 2017 at 11:00 -
window.addEventListener
will only work when your connection changes i.e when you goes from online to offline or vice-versa Commented Oct 4, 2017 at 4:59 -
1In Chrome and Safari navigator.online will output true if you are connected to a LAN or a router. That does not mean you have internet access. developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine Try @Raed Salah solution below instead.– Poppe76Commented Oct 18, 2019 at 12:40
Navigator.online is a method that checks whether there is a connection or no. However this does not check "Internet connection" as it will always output true if you are connected to a network with or without internet.
here is a snippet
function findIp() {
var findIP = new Promise(r => {
var w = window,
a = new (w.RTCPeerConnection ||
w.mozRTCPeerConnection ||
w.webkitRTCPeerConnection)({ iceServers: [] }),
b = () => {};
a.createDataChannel("");
a.createOffer(c => a.setLocalDescription(c, b, b), b);
a.onicecandidate = c => {
try {
c.candidate.candidate
.match(
/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g
)
.forEach(r);
} catch (e) {}
};
});
findIP
.then(ip => $("#ipchk").html("your IP: " + ip))
.catch(e => console.error(e));
}
//gets the network status from the browser navigator api once page is loaded
function chkstatus() {
if (navigator.onLine) {
console.log("online");
$("#netchk").html("online");
$(".dot").removeClass("offline");
$(".dot").addClass("online");
//print ip if there is connection
findIp();
} else {
console.log("offline");
$("#netchk").html("offline");
$(".dot").removeClass("online");
$(".dot").addClass("offline");
}
}
//check status every 5 seconds
setInterval(chkstatus, 5000);
$(document).ready(function() {
chkstatus();
//event listener for changes in the netwrok
window.addEventListener("offline", function(e) {
$("#netchk").html("offline");
$(".dot").removeClass("online");
$(".dot").addClass("offline");
$("#ipchk").html("your ip: ");
});
window.addEventListener("online", function(e) {
console.log("online");
$("#netchk").html("online");
$(".dot").removeClass("offline");
$(".dot").addClass("online");
findIp();
});
});
#main-content {
height: 100vh;
display: flex;
align-items: center;
}
#content {
text-align: center;
background-image: linear-gradient(to left, #4776e6, #8e54e9);
padding: 20px;
border-radius: 30px;
color: #fafafa;
margin: 0 auto;
font-size: 20px;
font-family: "Courier New", Courier, monospace;
text-transform: capitalize;
box-shadow: 0 10px 20px rgba(41, 72, 255, 0.19),
0 6px 6px rgba(41, 72, 255, 0.23);
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
}
.online {
background-color: greenyellow;
}
.offline {
background-color: #f44336;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Network Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="layout">
<div id="main-content">
<div id="content">
<div><span id="netchk"></span> <span class="dot"></span></div>
<hr />
<div id="ipchk"></div>
</div>
</div>
</div>
</body>
</html>
try connecting through your phone hotspot and disconnecting the internet/4G. you will notice it still shows online.
this code check your network status and ip every 5 secs, here is a link to the github REPO.
The best way to check for internet connection for now is through an ajax request.
U can do this:
// When the internet is off
addEventListener('offline', function(){
alert("No Internet");
});
// When the internet is on
addEventListener('online', function(){
alert("Back online");
});
Or you can do that:
alert(/*It would either say true or false*/ navigator.onLine? /* On true: */"Online":/*On false:*/"Offline");
-
A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it.– Tyler2PCommented Jan 28, 2022 at 22:34
var x = confirm("Are you sure you want to submit?");
if(x){
if(navigator.onLine == true) {
return true;
} else {
alert('Internet connection is lost');
return false;
}
}
else {
return false;
}
-
navigator.online is not dependable in Chrome and Safari. Look up on mozdev.– Poppe76Commented Oct 18, 2019 at 12:41