检测Internet连接是否脱机？

如何检测互联网连接在JavaScript中是离线的？

您可以通过执行失败的XHR请求来确定连接丢失。

标准方法是重试几次请求 。 如果没有通过， 提醒用户检查连接，并优雅地失败 。

旁注：为了使整个应用程序处于“离线”状态，可能会导致很多容易出错的处理状态。无线连接可能会来来去去，等等。所以，最好的办法可能是优雅地失败，保存数据，并警告用户..让他们最终解决连接问题，如果有的话，并继续使用你的应用程序与相当数量的宽恕。

旁注：你可以检查一个可靠的网站，如谷歌连接，但这可能不是完全有用的，只是试图做出自己的请求，因为虽然谷歌可能会，你自己的应用程序可能不会，你仍然要必须处理您自己的连接问题。 尝试发送ping到谷歌将是一个很好的方式来确认互联网连接本身已经closures，所以如果这些信息对您有用，那么这可能是值得的麻烦。

旁注 ： 发送一个Ping可以通过同样的方式来实现，你可以做任何types的双向ajax请求，但在这种情况下发送ping到谷歌会带来一些挑战。 首先，我们会遇到与制作ajax通信时遇到的相同的跨域问题。 一个select是build立一个服务器端代理，其中我们实际上ping谷歌（或任何网站），并将ping的结果返回到应用程序。这是一个catch-22 ，因为如果互联网连接实际上问题，我们将无法到达服务器，如果连接问题只在我们自己的领域，我们将无法区分。 其他跨域技术可以尝试，例如，在您的页面中embedded一个指向google.com的iframe，然后轮询iframe是否成功/失败（检查内容等）。 embedded图像可能不会告诉我们任何事情，因为我们需要一个来自通信机制的有用回应，以便对发生的事情得出一个好的结论。 再次，确定整个互联网连接的状态可能比它的价值更麻烦。 您将不得不为这些特定的应用减less这些选项。

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

但是，这当然不会对其他浏览器或操作系统有所帮助。 我预测其他浏览器厂商也将决定提供该属性，同时考虑到在Ajax应用程序中了解在线/离线状态的重要性。

在这之前，XHR或者Image()或者<img>请求可以提供接近你想要的function的东西。

更新（2014/11/16）

主要的浏览器现在支持这个属性，但是你的结果会有所不同。

从Mozilla文档引用：

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

在Firefox和Internet Explorer中，将浏览器切换到脱机模式会发送一个false值。 所有其他条件返回一个true价值。

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

  • AJAX请求到您自己的网站。 如果这个请求失败了，那么很可能是错误的连接。 JQuery文档中有关于处理失败的AJAX请求的部分 。 这样做时要小心同源策略 ，这可能会阻止您访问域外的网站。

  • 你可以把一个错误，像一个img 

     <img src='http://www.example.com/singlepixel.gif' onerror='alert("Connection dead");' />

    如果源图像被移动/重命名，该方法也可能失败，并且对于ajax选项来说通常是次要的select。

所以有几种不同的方法来尝试和检测这个，但没有一个是完美的，但是由于没有能力跳出浏览器沙箱并直接访问用户的networking连接状态，它们似乎是最好的select。 

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

HTML5应用cachingAPI指定了navigator.onLine，它目前在IE8 beta版，WebKit（例如Safari）中是可用的，并且已经在Firefox 3中受支持

您可以使用$ .ajax（）的errorcallback，如果请求失败，则会触发。 如果textStatus等于string“超时”，这可能意味着连接中断： 

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

从文档 ：

错误 ：如果请求失败，将被调用的函数。 该函数传递三个参数：XMLHttpRequest对象，一个描述发生的错误types的string，以及一个可选的exception对象（如果发生的话）。 第二个参数（除了null）的可能值是“超时”，“错误”，“未修改”和“parsing错误”。 这是一个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所说，使用navigator.onLine浏览器属性比发送networking请求更好，因此，与developer.mozilla.org/En/Online_and_offline_events相比 ，Firefox和IE的旧版本甚至都支持它。

最近，WHATWG已经指定添加online和offline事件，以防万一您需要在navigator.onLine更改上作出反应。

请注意Daniel Silveira发布的链接，指出依靠这些信号/属性与服务器同步并不总是一个好主意。

我必须为一个在学校工作很多的客户开发一个networking应用程序（基于Ajax），这些学校经常有一个糟糕的互联网连接，我使用这个简单的function来检测是否有连接，工作得很好！

我使用CodeIgniter和Jquery： 

  function checkOnline(){ setTimeout("doOnlineCheck()", 20000); } function doOnlineCheck(){ var submitURL = $("#base_path").val() + "index.php/menu/online";//if the server can be reached it returns 1, other wise it times out $.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; } });

这只是给你的概念，应该改进，检查返回http状态码等

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

我find了一种通过查找带有404代码的xhrStatus来检测它的方法。 另外，我使用JSONP来绕过CORS限制。 除404以外的状态码显示互联网连接不工作。 

 $.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) } } });

非常有趣的脚本，恢复了很多上面：

http://www.codeproject.com/KB/scripting/InternetConnectionTest.aspx

这是非常有用的，因为它是基于Ajax的，是asynchronous的，所以你可以检查互联网是否连接而不离开原来的页面。 使用这个计时器，你也可以在页面中每隔n分钟检查一个组件。

我的方式。 

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

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

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

这是我有一个辅助工具的一个片段。 这是命名空间的javascript： 

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

你应该使用这个方法检测，否则发射一个“替代”的方式做到这一点。 当这将是所有需要的时候，时间快到了。 其他的方法是黑客。

    Interesting Posts

    使用.NET检查Internet连接的最佳方法是什么？

    模拟一个糟糕的互联网连接

    检查互联网连接（iOS 10）

    使用Java检测互联网连接

    检查互联网连接是否存在与JavaScript？