在 JavaScript 中检查每次提交的互联网连接
Check the internet connection for each and every time of submission in JavaScript
有什么方法可以在 JavaScript 每次提交时检查互联网连接?
您可以使用 navigator.onLine
检查是否有互联网连接。您还可以使用 2 个事件侦听器来通知网络连接何时连接或断开。
console.log(navigator.onLine);
// OR
window.addEventListener('online', () => {
//console.log('Online');
});
window.addEventListener('offline', () => {
//console.log('Offline');
});
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是一种检查是否有连接的方法。但是,这不会检查 "Internet connection",因为如果您连接到有或没有互联网的网络,它将始终输出 true。
这是一个片段
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>
尝试通过您的 phone 热点连接并断开 internet/4G。你会注意到它仍然在线显示。
此代码每 5 秒检查一次您的网络状态和 ip,这里是 link 到 github REPO.
目前检查互联网连接的最佳方法是通过 ajax 请求。
你可以做到这一点:
// When the internet is off
addEventListener('offline', function(){
alert("No Internet");
});
// When the internet is on
addEventListener('online', function(){
alert("Back online");
});
或者你可以这样做:
alert(/*It would either say true or false*/ navigator.onLine? /* On true: */"Online":/*On false:*/"Offline");
有什么方法可以在 JavaScript 每次提交时检查互联网连接?
您可以使用 navigator.onLine
检查是否有互联网连接。您还可以使用 2 个事件侦听器来通知网络连接何时连接或断开。
console.log(navigator.onLine);
// OR
window.addEventListener('online', () => {
//console.log('Online');
});
window.addEventListener('offline', () => {
//console.log('Offline');
});
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是一种检查是否有连接的方法。但是,这不会检查 "Internet connection",因为如果您连接到有或没有互联网的网络,它将始终输出 true。
这是一个片段
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>
尝试通过您的 phone 热点连接并断开 internet/4G。你会注意到它仍然在线显示。
此代码每 5 秒检查一次您的网络状态和 ip,这里是 link 到 github REPO.
目前检查互联网连接的最佳方法是通过 ajax 请求。
你可以做到这一点:
// When the internet is off
addEventListener('offline', function(){
alert("No Internet");
});
// When the internet is on
addEventListener('online', function(){
alert("Back online");
});
或者你可以这样做:
alert(/*It would either say true or false*/ navigator.onLine? /* On true: */"Online":/*On false:*/"Offline");