检测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已经指定添加onlineoffline事件,以防万一您需要在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; } 

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