¿Detecta que la conexión a Internet está fuera de línea?

IE 8 soportará la ventana .navegador.En línea propiedad.

Pero, por supuesto, eso no ayuda con otros navegadores o sistemas operativos. Predigo que otros proveedores de navegadores decidirán proporcionar esa propiedad también dada la importancia de conocer el estado en línea/fuera de línea en las aplicaciones Ajax.

Hasta que eso suceda, ya sea XHR o una solicitud Image() o <img> puede proporcionar algo cercano a la funcionalidad que desea.

Actualizar (2014/11/16)

Los principales navegadores ahora admiten esta propiedad, pero sus resultados variarán.

Cita de Documentación de Mozilla :

En Chrome y Safari, si el navegador no puede conectarse a una red de área local (LAN) o un enrutador, está fuera de línea; todas las demás condiciones devuelven true. Por lo tanto, si bien puede asumir que el navegador está fuera de línea cuando devuelve un valor false, no puede asumir que un valor verdadero necesariamente significa que el navegador puede acceder al Internet. Podría estar obteniendo falsos positivos, como en los casos en que el equipo está ejecutando un software de virtualización que tiene adaptadores ethernet virtuales que siempre están "conectados"."Por lo tanto, si realmente desea determinar el estado en línea del navegador, debe desarrollar medios adicionales para verificar.

En Firefox e Internet Explorer, cambiar el navegador al modo sin conexión envía un valor false. Todas las demás condiciones devuelven un valor true.

Hay varias maneras de hacer esto:

• Solicitud AJAX a su propio sitio web. Si esa solicitud falla, hay una buena probabilidad de que sea la conexión la culpable. La documentación de jQuery tiene una sección sobre el manejo de solicitudes AJAX fallidas. Tenga cuidado con la Política del mismo Origen al hacer esto, que puede impedirle acceder a sitios fuera de su dominio.

• Podrías poner un onerror en un img, como

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

  Este método también podría fallar si el la imagen de origen se mueve / cambia de nombre, y generalmente sería una opción inferior a la opción ajax.

Así que hay varias maneras diferentes de tratar de detectar esto, ninguna perfecta, pero en ausencia de la capacidad de saltar fuera de la caja de arena del navegador y acceder al estado de la conexión de red del usuario directamente, parecen ser las mejores opciones.

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

La API de caché de aplicaciones HTML5 especifica navigator.En línea, que actualmente está disponible en el IE8 betas, WebKit (por ejemplo. Safari) nightlies, y ya es compatible con Firefox 3

Como dijo olliej, usar la propiedad del navegador navigator.onLine es preferible que enviar solicitudes de red y, en consecuencia, con developer.mozilla.org/En/Online_and_offline_events , incluso es compatible con versiones antiguas de Firefox e IE.

Recientemente, el WHATWG ha especificado la adición de los eventos online y offline, en caso de que necesite reaccionar a los cambios navigator.onLine.

Por favor, también preste atención al enlace publicado por Daniel Silveira que señala que confiar en aquellos señal / propiedad para sincronizar con el servidor no siempre es una buena idea.

Puede usar $.ajax () 's error callback, que se activa si la solicitud falla. Si textStatus es igual a la cadena "timeout" probablemente significa que la conexión está rota:

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

Del doc :

Error: Una función a ser llamada si la petición fallar. La función se pasa tres argumentos: El objeto XMLHttpRequest, una cadena que describe el tipo de error que se produjo y un opcional objeto de excepción, si se ha producido uno. Valores posibles para segundo argumento (además de null) son " timeout", "error", "no modificado" y "parsererror". Este es un evento Ajax

Por ejemplo:

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

Tuve que hacer una aplicación web (basada en ajax) para un cliente que trabaja mucho con las escuelas, estas escuelas tienen a menudo una mala conexión a Internet Utilizo esta sencilla función para detectar si hay una conexión, funciona muy bien!

Uso CodeIgniter y 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();
        }
    });
}

Una llamada ajax a tu dominio es la forma más fácil de detectar si estás desconectado

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

Esto es solo para darle el concepto, debe ser mejorado, verifique los códigos de estado http devueltos, etc

Creo que es una manera muy simple.

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

Estaba buscando una solución del lado del cliente para detectar si Internet estaba caído o mi servidor estaba caído. Las otras soluciones que encontré siempre parecían depender de un archivo de script o imagen de terceros, que para mí no parecía que resistiría la prueba del tiempo. Un script o imagen alojada externa podría cambiar en el futuro y provocar un error en el código de detección.

He encontrado una manera de detectarlo buscando un xhrStatus con un código 404. Además, uso JSONP para evitar los CORS restricción. Un código de estado que no sea 404 muestra que la conexión a Internet no funciona.

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

Script muy interesante que se reanuda una gran cantidad de arriba:

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

Es muy útil, y debido a que está basado en Ajax, es asíncrono, por lo que puede comprobar si el Internet está conectado sin salir de la página original. Usando esto con un temporizador también puede tener un componente en la página comprobando cada n minutos.

A mi manera.

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

Hay 2 respuestas para esto para dos senarios diferentes: -

1. Si está utilizando JavaScript en un sitio web (es decir, o cualquier parte del front-end) La forma más sencilla de hacerlo es:

   <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. Pero si está utilizando js en el lado del servidor (es decir; nodo, etc.), puede determinar que la conexión se pierde al realizar solicitudes XHR fallidas.

   El enfoque estándar es reintentar la solicitud unas cuantas veces. Si no se realiza, avise al usuario para que verifique la conexión, y fallan con gracia.

Cabeza de solicitud en error de solicitud

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

Aquí hay un fragmento de una utilidad auxiliar que tengo. Esto es javascript con espacio de nombres:

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

Debe usar esto con la detección de métodos, de lo contrario, disparará una forma 'alternativa' de hacer esto. El tiempo se acerca rápidamente cuando esto será todo lo que se necesita. Los otros métodos son hacks.