每次在 JavaScript 中提交时检查互联网连接答案

【问题标题】：Check the internet connection for each and every time of submission in JavaScript每次在 JavaScript 中提交时检查互联网连接
【发布时间】：2022-02-13 00:21:04
【问题描述】：

是否有任何可能的方法来检查每次在 JavaScript 中提交的互联网连接？

【问题讨论】：

Detect that the Internet connection is offline?的可能重复

标签： javascript jquery offline internet-connection

【解决方案1】：

您可以使用navigator.onLine 来检查是否有互联网连接。您还可以使用 2 个事件监听器来通知网络连接何时连接或断开。

console.log(navigator.onLine);

// OR

window.addEventListener('online', () => {
   //console.log('Online');
});

window.addEventListener('offline', () => {
        //console.log('Offline');  
});

【讨论】：

console.log(navigator.onLine) 正在工作。但是window.addEventListener 不起作用。
window.addEventListener 仅在您的连接发生变化时起作用，即当您从在线变为离线时，反之亦然
在 Chrome 和 Safari 中，如果您连接到 LAN 或路由器，navigator.online 将输出 true。这并不意味着您可以访问互联网。 developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine 试试下面的@Raed Salah 解决方案。

【解决方案2】：

Navigator.online 是一种检查是否存在连接的方法。但是，这不会检查“Internet 连接”，因为如果您连接到有或没有 Internet 的网络，它将始终输出 true。

这是一个sn-p

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>

尝试通过手机热点连接并断开互联网/4G。您会注意到它仍然在线显示。

此代码每 5 秒检查一次您的网络状态和 ip，这里是 github REPO 的链接。

目前检查互联网连接的最佳方式是通过 ajax 请求。

【讨论】：

【解决方案3】：

你可以这样做：

// 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");

【讨论】：

一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。

【解决方案4】：

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 在 Chrome 和 Safari 中不可靠。在 mozdev 上查找。