¿Comprueba si existe conexión a Internet con jQuery? [duplicar]

Resuelto Lance asked hace 14 años • 9 respuestas

¿Cómo se comprueba si hay conexión a Internet usando jQuery? De esa manera, podría tener algunos condicionales que digan "use la versión de JQuery en caché de Google durante la producción, use esa o una versión local durante el desarrollo, dependiendo de la conexión a Internet".

Lance avatar Mar 05 '10 09:03 Lance
Aceptado

La mejor opción para su caso específico podría ser:

Justo antes de tu </body>etiqueta de cierre:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Esta es probablemente la forma más sencilla dado que su problema se centra en jQuery.

Si quisieras una solución más sólida, puedes probar:

var online = navigator.onLine;

Lea más sobre las especificaciones del W3C sobre aplicaciones web sin conexión ; sin embargo, tenga en cuenta que esto funcionará mejor en navegadores web modernos; hacerlo con navegadores web más antiguos puede no funcionar como se esperaba, o no funcionar en absoluto.

Alternativamente, una solicitud XHR a su propio servidor no es un método tan malo para probar su conectividad. Teniendo en cuenta que una de las otras respuestas indica que hay demasiados puntos de falla para un XHR, si su XHR tiene fallas al establecer su conexión, entonces también tendrá fallas durante el uso de rutina de todos modos. Si su sitio es inaccesible por algún motivo, es probable que sus otros servicios que se ejecutan en los mismos servidores también lo sean. Esa decisión depende de usted.

No recomendaría realizar una solicitud XHR al servicio de otra persona, ni siquiera a google.com. Realice la solicitud a su servidor, o no la haga.

¿Qué significa estar "en línea"?

Parece haber cierta confusión sobre lo que significa estar "en línea". Considere que Internet es un conjunto de redes; sin embargo, a veces está en una VPN, sin acceso a Internet "en general" o a la World Wide Web. A menudo las empresas tienen sus propias redes que tienen conectividad limitada con otras redes externas, por lo que se le podría considerar "en línea". Estar en línea sólo implica que está conectado a una red, no la disponibilidad ni la accesibilidad de los servicios a los que intenta conectarse.

Para determinar si se puede acceder a un host desde su red, puede hacer esto:

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 >= 200 && (xhr.status < 300 || xhr.status === 304) );
  } catch (error) {
    return false;
  }

}

También puede encontrar la esencia de eso aquí: https://gist.github.com/jpsilvashy/5725579

Detalles sobre la implementación local

Algunas personas han comentado: "Siempre me devuelven falso". Esto se debe a que probablemente lo estés probando en tu servidor local. Cualquiera que sea el servidor al que esté realizando la solicitud, deberá poder responder a la solicitud HEAD, que por supuesto se puede cambiar a GET si lo desea.

JP Silvashy avatar Mar 05 '2010 02:03 JP Silvashy

Ok, tal vez un poco tarde en el juego, pero ¿qué tal si lo verificamos con una imagen en línea? Quiero decir, el OP necesita saber si necesita obtener el CMD de Google o la copia JQ local, pero eso no significa que el navegador no pueda leer Javascript pase lo que pase, ¿verdad?

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

Solo mis 2 centavos

morespace54 avatar Nov 09 '2010 22:11 morespace54

5 años después-versión:

Hoy en día, existen bibliotecas JS para usted, si no desea entrar en el meollo de los diferentes métodos descritos en esta página.

Uno de ellos es https://github.com/hubspot/offline . Comprueba la conectividad de un URI predefinido, de forma predeterminada su favicon. Detecta automáticamente cuándo se ha restablecido la conectividad del usuario y proporciona eventos interesantes como upy down, a los que puede vincularse para actualizar su interfaz de usuario.

Phil Rykoff avatar Mar 05 '2010 02:03 Phil Rykoff

Puedes imitar el comando Ping.

Utilice Ajax para solicitar una marca de tiempo para su propio servidor, defina un temporizador usando setTimeout en 5 segundos, si no hay respuesta, vuelva a intentarlo.

Si no hay respuesta en 4 intentos, puedes suponer que Internet no funciona.

Así que puedes comprobarlo usando esta rutina en intervalos regulares como 1 o 3 minutos.

Esa me parece una solución buena y limpia.

Vitim.us avatar Jan 21 '2012 16:01 Vitim.us

Puede intentar enviar solicitudes XHR varias veces y luego, si obtiene errores, significa que hay un problema con la conexión a Internet.

Soufiane Hassou avatar Mar 05 '2010 02:03 Soufiane Hassou