检测互联网连接是否离线？

您可以通过发出失败的 XHR 请求来确定连接是否丢失。

标准方法是重试请求几次。如果未通过，请提醒用户检查连接，并正常失败。

旁注：将整个应用程序置于“脱机”状态可能会导致大量容易出错的处理状态工作。无线连接可能会来来去去，等等。因此，最好的选择可能是优雅地失败，保留数据并提醒用户。允许他们最终解决连接问题（如果有），并继续使用您的应用程序，并给予相当大的宽容。

旁注：您可以检查像 google 这样的可靠网站的连接性，但这可能并不完全有用，因为只是尝试提出自己的请求，因为虽然 Google 可能可用，但您自己的应用程序可能不可用，并且您仍然必须处理自己的连接问题。尝试向谷歌发送ping将是确认互联网连接本身已关闭的好方法，因此，如果该信息对您有用，那么可能值得麻烦。

旁注：发送 Ping 的方式与发出任何类型的双向 ajax 请求的方式相同，但在这种情况下，向 google 发送 ping 会带来一些挑战。首先，我们会遇到与进行 Ajax 通信时通常遇到的相同的跨域问题。一种选择是设置一个服务器端代理，其中我们实际上谷歌（或任何网站），并将 ping 的结果返回给应用程序。这是一个第22条军规，因为如果互联网连接确实是问题所在，我们将无法访问服务器，如果连接问题只出现在我们自己的域上，我们将无法区分。可以尝试其他跨域技术，例如，在页面中嵌入指向 google.com 的 iframe，然后轮询 iframe 是否成功/失败（检查内容等）。嵌入图像可能并不能真正告诉我们任何事情，因为我们需要来自通信机制的有用响应，以便对正在发生的事情得出一个很好的结论。因此，确定整个互联网连接的状态可能比它的价值更麻烦。您必须针对您的特定应用权衡这些选项。ping

有多种方法可以做到这一点：

• AJAX 请求到您自己的网站。如果该请求失败，则很有可能是连接出错了。JQuery 文档中有一节是关于如何处理失败的 AJAX 请求的。执行此操作时，请注意同源政策，这可能会阻止您访问网域外的网站。
• 你可以把一个放在一个 ，比如 。onerrorimg<img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />

如果移动/重命名源图像，此方法也可能失败，并且通常不如 ajax 选项。

因此，有几种不同的方法可以尝试检测这一点，但没有一种是完美的，但是在没有跳出浏览器沙箱并直接访问用户网络连接状态的能力的情况下，它们似乎是最佳选择。

IE 8 将支持 window.navigator.onLine 属性。

但当然，这对其他浏览器或操作系统没有帮助。我预测其他浏览器供应商也会决定提供该属性，因为了解 Ajax 应用程序中的在线/离线状态非常重要。

在此之前，XHR 或 or 请求都可以提供接近您想要的功能。Image()<img>

更新 （2014/11/16）

主要浏览器现在都支持此属性，但结果会有所不同。

引用Mozilla文档：

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 （LAN） 或路由器，则浏览器处于离线状态;所有其他条件返回 。因此，虽然您可以假设浏览器在返回值时处于脱机状态，但您不能假设 true 值一定意味着浏览器可以访问 Internet。您可能会收到误报，例如，如果计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器。因此，如果您真的想确定浏览器的在线状态，您应该开发其他检查方法。truefalse

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送一个值。所有其他条件都返回一个值。falsetrue

HTML5 Application Cache API 指定了 navigator.onLine，目前在 IE8 测试版中可用，WebKit（例如。Safari） nightlies，并且已经在 Firefox 3 中支持

您可以使用 $.ajax（） 的回调，如果请求失败，则会触发该回调。如果等于字符串“timeout”，则可能意味着连接已断开：errortextStatus

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

从文档：

错误：请求时要调用的函数 失败。该函数传递了三个 arguments：XMLHttpRequest 对象， 描述错误类型的字符串 发生和可选 异常对象（如果发生）。 第二个可能的值 参数（除 null 外）是“timeout”， “error”、“notmodified” 和 “解析器错误”。这是一个 Ajax 事件

例如：

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });

正如 olliej 所说，使用浏览器属性比发送网络请求更可取，因此，使用 developer.mozilla.org/En/Online_and_offline_events，旧版本的 Firefox 和 IE 甚至支持它。navigator.onLine

最近，WHATWG 指定了添加 and 事件，以防您需要对更改做出反应。onlineofflinenavigator.onLine

另请注意丹尼尔·西尔维拉（Daniel Silveira）发布的链接，该链接指出，依靠这些信号/属性与服务器同步并不总是一个好主意。

这是我拥有的帮助程序实用程序的片段。这是命名空间的javascript：

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

您应该将其与方法检测一起使用，否则会触发“替代”方法来执行此操作。时间很快就要到了，这将是所需要的。其他方法是黑客攻击。

我的方式。

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

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

查看 onLine Basic 用法

我不得不为一个经常与学校合作的客户制作一个网络应用程序（基于 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();
        }
    });
}

对域的 AJAX 调用是检测您是否处于离线状态的最简单方法

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

这只是为了给你一个概念，它应该改进。

例如，error=404 仍然应该意味着您在线

我一直在寻找一种客户端解决方案来检测互联网是否关闭或我的服务器是否关闭。我发现的其他解决方案似乎总是依赖于第三方脚本文件或图像，对我来说，这似乎经不起时间的考验。外部托管脚本或映像将来可能会更改，并导致检测代码失败。

我找到了一种方法来检测它，方法是寻找带有 404 代码的 xhrStatus。此外，我使用 JSONP 绕过 CORS 限制。404 以外的状态代码表示 Internet 连接无法正常工作。

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});

我认为这是一种非常简单的方法。

var x = confirm("Are you sure you want to submit?");
if (x) {
  if (navigator.onLine == true) {
    return true;
  }
  alert('Internet connection is lost');
  return false;
}
return false;

对于两个不同的参议院，有 2 个答案：-

1. 如果您在网站（即或任何前端部分）上使用 JavaScript 最简单的方法是：

   <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>
   

2. 但是如果你在服务器端（即节点等）上使用js，你可以通过发出失败的XHR请求来确定连接是否丢失。

   标准方法是重试请求几次。如果未通过，请提醒用户检查连接，并正常失败。

请求错误中的请求头

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

现在几乎所有主流浏览器都支持 window.navigator.onLine 属性，以及相应的 和 window 事件。运行以下代码片段进行测试：onlineoffline

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:

尝试将系统或浏览器设置为脱机/联机模式，并检查日志或属性的值是否更改。window.navigator.onLine

但请注意Mozilla文档中的这句话：

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 （LAN） 或路由器，则浏览器处于离线状态;所有其他条件返回 。因此，虽然您可以假设浏览器在返回 false 值时处于脱机状态，但您不能假设 true 值一定意味着浏览器可以访问 Internet。您可能会收到误报，例如，如果计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器。因此，如果您真的想确定浏览器的在线状态，您应该开发其他检查方法。true

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送一个值。在 Firefox 41 之前，所有其他条件都返回一个值;从 Firefox 41 开始，在 OS X 和 Windows 上，该值将遵循实际的网络连接。falsetrue

（强调是我自己的）

这意味着，如果是（或者您收到一个事件），则保证您没有 Internet 连接。window.navigator.onLinefalseoffline

但是，如果是（或者您收到事件），则最多只能表示系统已连接到某个网络。例如，这并不意味着您可以访问 Internet。要检查这一点，您仍然需要使用其他答案中描述的解决方案之一。trueonline

_{我最初打算将此作为格兰特·瓦格纳（Grant Wagner）答案的更新发布，但这似乎过于编辑，特别是考虑到2014年的更新已经不是来自他。}

某些方法的问题在于它们与某些浏览器和移动版本不兼容，对我有很大帮助的一个选项是使用经典方法，并且还可以预见文件存储在缓存中且响应大于 200 且小于 304 的可能情况。navigator.onLineXMLHttpRequestXMLHttpRequest.status

这是我的代码：

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

window.navigator.onLine

是你要找的，但这里要添加的东西很少，首先，如果它是你的应用程序上的东西，你想继续检查（比如看看用户是否突然离线，在这种情况下大部分时间都是正确的，那么你需要听变化），因为你将事件侦听器添加到窗口以检测任何变化， 要检查用户是否脱机，您可以执行以下操作：

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

以及检查是否在线：

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

我知道这个问题已经得到回答，但我想加上我的 10 美分来解释什么更好，什么不好。

Window.navigator.onLine

我注意到一些答案谈到了这个选项，但他们从未提到任何关于警告的事情。

此选项涉及使用“window.navigator.onLine”，这是大多数现代浏览器上可用的浏览器导航器界面下的属性。对于检查互联网可用性来说，这确实不是一个可行的选择，因为首先和其次。it is browser centricmost browsers implement this property differently

在 Firefox 中：该属性返回一个布尔值，其含义为在线，表示离线，但这里需要注意的是 “” 因此，如果用户离线并且 你从 JS 函数或脚本查询属性，该属性将 始终返回，直到用户点击链接。truefalsethe value is only updated when the user follows links or when a script requests a remote page.true

在 Chrome 和 Safari 中：如果浏览器无法连接到局域网 （LAN） 或路由器，则浏览器处于离线状态;所有其他 条件返回 true。因此，虽然您可以假设浏览器是 offline 当它返回 false 值时，不能假定 true value 必然意味着浏览器可以访问 Internet。你 可能会出现误报，例如在计算机 正在运行具有虚拟以太网的虚拟化软件 始终处于“连接”状态的适配器。

上面的陈述只是想让你知道，仅靠浏览器是无法分辨的。所以基本上这个选项是不可靠的。

向自己的服务器资源发送请求

1. 没有服务器可用性是 100% 依赖的，因此，如果由于某种原因无法访问您的服务器，则会错误地认为用户在连接到互联网时处于离线状态。
2. 对同一资源的多个请求可能会返回缓存的响应，使 http 响应结果不可靠。

如果您同意您的服务器始终在线，那么您可以使用此选项。

下面是获取自己的资源的简单代码片段：

// This fetches your website's favicon, so replace path with favicon url
// Notice the appended date param which helps prevent browser caching.
fetch('/favicon.ico?d='+Date.now())
  .then(response => {
    if (!response.ok)
      throw new Error('Network response was not ok');

   // At this point we can safely assume the user has connection to the internet
        console.log("Internet connection available"); 
  })
  .catch(error => {
  // The resource could not be reached
        console.log("No Internet connection", error);
  });

向第三方服务器资源发送请求

此选项涉及向外部服务器资源发出 HTTP 请求，如果可访问，则假定 Internet 可用，否则用户处于脱机状态。对此的主要警告是跨域资源共享，这是一种限制。大多数信誉良好的网站都会阻止 CORS 请求，但对于某些网站，您可以按照自己的方式行事。

下面是获取外部资源的简单代码片段，与上面相同，但使用外部资源 URL：

// Firstly you trigger a resource available from a reputable site
// For demo purpose you can use the favicon from MSN website
// Also notice the appended date param which helps skip browser caching.
fetch('https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d='+Date.now())
  .then(response => {
  // Check if the response is successful
    if (!response.ok)
      throw new Error('Network response was not ok');

// At this point we can safely say the user has connection to the internet
        console.log("Internet available"); 
  })
  .catch(error => {
  // The resource could not be reached
        console.log("No Internet connection", error);
  });

所以，最后，对于我的个人项目，我选择了第二个选项，它涉及请求自己的服务器资源，因为基本上有很多因素可以判断用户设备上是否有“互联网连接”，而不仅仅是来自您的网站容器或有限的浏览器 api。

请记住，您的用户也可能处于某些网站或资源被阻止、禁止和无法访问的环境中，这反过来又会影响连接检查的逻辑。最好的选择是：

• 尝试访问您自己的服务器上的资源，因为这是您的用户环境（通常我使用网站的图标，因为响应非常轻，并且不经常更新）。
• 如果没有连接到资源，只需在需要通知用户时说“连接错误”或“连接丢失”，而不是假设“没有互联网连接”，这取决于许多因素。

如果这是，则使用，否则您处于在线状态，否则处于离线状态navigator.onLinetrue

您可以尝试如果网络连接，这将返回 true

function isInternetConnected(){return navigator.onLine;}

使用 no-cors 向 google.com 发送不透明的 http 请求怎么样？

    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，并允许我简单地检查我是否可以连接到 Google。

仅供参考：我在这里使用 fetch 来发出 http 请求。https://www.npmjs.com/package/fetch

现代打字稿方法：

/**
 * @example
 * const isOnline = await isGoogleOnline();
 */
async function isGoogleOnline(): Promise<boolean> {
    return new Promise((resolve, reject) => {
        // approach taken from https://github.com/HubSpot/offline/blob/master/js/offline.js#L223
        const img = document.createElement('img');
        img.onerror = () => {
            // calling `reject` basically means `throw` if using `await`.
            // Instead, we'll just resovle with `false`. (https://www.swyx.io/errors-not-exceptions)
            resolve(false);
        };
        img.onload = () => {
            resolve(true);
        };
        img.src = 'https://www.google.com/favicon.ico?_=' + ((new Date()).getTime());
    });
}

如果您的请求失败，并且是 FALSE，您可以放心，您实际上处于离线状态。navigator.onLine

如果请求成功，请放心，您实际上处于在线状态。

根据您想要的用户体验，您可能根本不需要太多。