if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }

对于两种不同的情况，有两个答案:-

If you are using JavaScript on a website(i.e; or any front-end part) The simplest way to do it is: <h2>The Navigator Object</h2> <p>The onLine property returns true if the browser is online:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine; </script> But if you're using js on server side(i.e; node etc.), You can determine that the connection is lost by making failed XHR requests. The standard approach is to retry the request a few times. If it doesn't go through, alert the user to check the connection, and fail gracefully.

只需使用导航器。如果这是真的，那么你是在线的，否则离线

如何发送一个不透明的http请求到google.com与无cors?

    fetch('https://google.com', {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'no-cors',
    }).then((result) => {
        console.log(result)
    }).catch(e => {
        console.error(e)
    })

设置no-cors的原因是，即使在我的pc上取消网络连接时，我也收到了cors错误。所以不管有没有网络连接，我都被封锁了。添加no-cors使请求不透明，这显然似乎绕过cors，并允许我只是简单地检查我是否可以连接到谷歌。

供参考:我在这里使用fetch进行http请求。 https://www.npmjs.com/package/fetch

下面是我拥有的一个辅助实用程序片段。这是带名称空间的javascript:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

你应该使用这个方法检测，否则发射一个'替代'的方式来做这件事。这将是我们所需要的全部。其他的方法是hack。

我不得不为一个与学校有很多合作的客户制作一个web应用程序(基于ajax)，这些学校的互联网连接经常不好，我使用这个简单的功能来检测是否有连接，工作得非常好!

我使用CodeIgniter和Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}