navigator.onLine 并不总是有效答案

【问题标题】：navigator.onLine not always workingnavigator.onLine 并不总是有效
【发布时间】：2012-12-26 07:52:20
【问题描述】：

我的 navigator.onLine 属性有问题。

我正在通过在 WAMP 上运行的本地信息亭运行一个简单的网站。

在我的笔记本电脑上测试它时它可以工作。我关闭 WiFi 并出现警告框。在运行 WAMP 软件的信息亭上断开互联网连接不会产生错误状态。任何想法为什么？

var online = navigator.onLine;

if (online == false) {

    alert("Sorry, we currently do not have Internet access.");
    location.reload();

}

【问题讨论】：

标签： javascript

【解决方案1】：

关于navigator.onLine的MDN：

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 (LAN) 或路由器，则它处于离线状态；所有其他条件都返回 true。因此，虽然您可以假设浏览器在返回 false 值时处于脱机状态，但您不能假设 true 值必然意味着浏览器可以访问互联网。

如上所述，此属性是不可信的，因此，在我看来，最好的解决方法是对服务器端页面进行 ajax 调用。如果浏览器离线，则连接将失败，因此将调用onerror 事件。否则，将调用 onload 事件：

function isOnline(no,yes){
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function(){
        if(yes instanceof Function){
            yes();
        }
    }
    xhr.onerror = function(){
        if(no instanceof Function){
            no();
        }
    }
    xhr.open("GET","anypage.php",true);
    xhr.send();
}

isOnline(
    function(){
        alert("Sorry, we currently do not have Internet access.");
    },
    function(){
        alert("Succesfully connected!");
    }
);

【讨论】：

小修正 - 你的参数中的函数顺序被交换，应该是function isOnline(yes, no){ ... }
如果我想从谷歌的CDN加载jQuery，如果请求成功则执行jQuery代码？
那么你应该把你的逻辑放在成功回调中（如果是yes函数）。
也可以调用jQuery.ajax，然后监听error:function(x, e)。如果 x.status ===0 表示网络有问题，可能离线
我想补充一点，如果您想检查除您自己的网站（已拨打电话的网站）以外的任何其他网站，例如从www.YourSite.com 到https//:google.com，如果目标站点（google.com）不接受Cross Site Calls，则会引发错误。如果我错了，请纠正我。

【解决方案2】：

如果您使用的是 axios：

axios.request(options).catch(function(error) {
  if (!error.response) {
    // network error (server is down or no internet)
  } else {
    // http status code
    const code = error.response.status
    // data from server while error
    const response = error.response.data
  }
});

【讨论】：