Check if Internet Connection Exists with jQuery

Question

How do you check if there is an internet connection using jQuery   That way I could have some conditionals saying  quot use the google cached version of JQuery during production  use either that or a local version during development  depending on the internet connection quot

User · Answer

Ok  maybe a bit late in the game but what about checking with an online image  I mean  the OP needs to know if he needs to grab the Google CMD or the local JQ copy  but that doesn t mean the browser can t read Javascript no matter what  right     lt script gt  function doConnectFunction        Grab the GOOGLE CMD   function doNotConnectFunction        Grab the LOCAL JQ    var i   new Image    i onload   doConnectFunction  i onerror   doNotConnectFunction     CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE i src    http   gfx2 hotmail com mail uxp w4 m4 pr014 h s7 png d     escape Date        escape Date    is necessary to override possibility of image coming from cache  lt  script gt    Just my 2 cents

User · Answer

I wrote a jQuery plugin for doing this  By default it checks the current URL  because that s already loaded once from the Web  or you can specify a URL to use as an argument  Always doing a request to Google isn t the best idea because it s blocked in different countries at different times  Also you might be at the mercy of what the connection across a particular ocean weather front political climate might be like that day   http   tomriley net blog archives 111

User · Answer

Sending XHR requests is bad because it could fail if that particular server is down   Instead  use googles API library to load their cached version s  of jQuery   You can use googles API to perform a callback after loading jQuery  and this will check if jQuery was loaded successfully   Something like the code below should work    lt script type  text javascript  gt      google load  jquery            Call this function when the page has been loaded     function test connection             if                   jQuery WAS loaded            else                 jQuery failed to load   Grab the local copy                      google setOnLoadCallback test connection    lt  script gt    The google API documentation can be found here

User · Answer

5 years later-version   Today  there are JS libraries for you  if you don t want to get into the nitty gritty of the different methods described on this page   On of these is https   github com hubspot offline  It checks for the connectivity of a pre-defined URI  by default your favicon  It automatically detects when the user s connectivity has been reestablished and provides neat events like up and down  which you can bind to in order to update your UI

User · Answer

You can mimic the Ping command   Use Ajax to request a timestamp to your own server  define a timer using setTimeout to 5 seconds  if theres no response it try again   If there s no response in 4 attempts  you can suppose that internet is down   So you can check using this routine in regular intervals like 1 or 3 minutes   That seems a good and clean solution for me

User · Answer

The best option for your specific case might be   Right before your close  lt  body gt  tag    lt script src  https   ajax googleapis com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script src  js vendor jquery-1 10 2 min js  gt  lt   script gt    lt  script gt    This is probably the easiest way given that your issue is centered around jQuery   If you wanted a more robust solution you could try   var online   navigator onLine    Read more about the W3C s spec on offline web apps  however be aware that this will work best in modern web browsers  doing so with older web browsers may not work as expected  or at all   Alternatively  an XHR request to your own server isn t that bad of a method for testing your connectivity  Considering one of the other answers state that there are too many points of failure for an XHR  if your XHR is flawed when establishing it s connection then it ll also be flawed during routine use anyhow  If your site is unreachable for any reason  then your other services running on the same servers will likely be unreachable also  That decision is up to you   I wouldn t recommend making an XHR request to someone else s service  even google com for that matter  Make the request to your server  or not at all   What does it mean to be  online    There seems to be some confusion around what being  online  means  Consider that the internet is a bunch of networks  however sometimes you re on a VPN  without access to the internet  at-large  or the world wide web  Often companies have their own networks which have limited connectivity to other external networks  therefore you could be considered  online   Being online only entails that you are connected to a network  not the availability nor reachability of the services you are trying to connect to   To determine if a host is reachable from your network  you could do this   function hostReachable           Handle IE and more capable browsers   var xhr   new   window ActiveXObject    XMLHttpRequest     Microsoft XMLHTTP           Open new request as a HEAD to the root hostname with a random param to bust the cache   xhr open   HEAD          window location hostname      rand     Math floor  1   Math random      0x10000   false          Issue request and handle response   try       xhr send        return   xhr status  gt   200  amp  amp   xhr status  lt  300    xhr status     304         catch  error        return false           You can also find the Gist for that here  https   gist github com jpsilvashy 5725579  Details on local implementation  Some people have commented   I m always being returned false   That s because you re probably testing it out on your local server  Whatever server you re making the request to  you ll need to be able to respond to the HEAD request  that of course can be changed to a GET if you want

User · Answer

You can try by sending XHR Requests a few times  and then if you get errors it means there s a problem with the internet connection   Edit  I found this JQuery script which is doing what you are asking for  I didn t test it though

User · Answer

A much simpler solution    lt script language  javascript  src  http   maps google com maps api js v 3 2 amp sensor false  gt  lt  script gt    and later in the code   var online     check whether this function works  online only  try     var x   google maps MapTypeId TERRAIN    online   true    catch  e      online   false    console log online     When not online the google script will not be loaded thus resulting in an error where an exception will be thrown

User · Answer

i have a solution who work here to check if internet connection exist       ajax       url   http   www google com       context  document body      error  function jqXHR  exception            alert  Offline              success  function             alert  Online

[jquery] Check if Internet Connection Exists with jQuery?

Examples related to jquery

Examples related to browser

Examples related to offline

Examples related to internet-connection