Détecter la connexion Internet est hors ligne?

IE 8 supporte la fenêtre .Navigator.en ligne propriété.

Mais bien sûr, cela ne fonctionne pas avec d'autres navigateurs ou systèmes d'exploitation. Je prédis que d'autres fournisseurs de navigateur décideront de fournir cette propriété ainsi étant donné l'importance de connaître le statut en ligne/hors ligne dans les applications Ajax.

Jusqu'à ce que cela arrive, soit XHR ou une demande Image() ou <img> peut fournir quelque chose proche de la fonctionnalité que vous voulez.

mise à Jour (2014/11/16)

les principaux navigateurs prennent maintenant en charge cette propriété, mais vos résultats varient.

citation de Mozilla Documentation :

dans Chrome et Safari, si le navigateur n'est pas en mesure de se connecter à un réseau local (LAN) ou un routeur, il est hors ligne; toutes les autres conditions retourner true . Ainsi, alors que vous pouvez supposer que le navigateur est hors ligne quand il renvoie une valeur false , vous ne pouvez pas supposer qu'une valeur vraie signifie nécessairement que le navigateur peut accéder à l'internet. Vous pourriez avoir de faux positifs, comme dans les cas où l'ordinateur exécute un logiciel de virtualisation qui a des adaptateurs ethernet virtuels qui sont toujours "connectés"."Par conséquent, si vous voulez vraiment déterminer le statut en ligne du navigateur, vous devez développer des moyens supplémentaires pour la vérification.

dans Firefox et Internet Explorer, le passage du navigateur en mode hors ligne envoie une valeur false . Toutes les autres conditions renvoient une valeur true .

il y a plusieurs façons de le faire:

• demande AJAX à votre propre site web. Si cette requête échoue, il y a de fortes chances que ce soit la connexion qui soit en cause. La documentation JQuery comporte une section sur handling failed AJAX requests . Méfiez-vous de la même Politique D'origine en faisant cela, qui peut vous empêcher d'accéder à des sites en dehors de votre domaine.

• vous pouvez mettre un onerror dans un img , comme

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

  cette méthode pourrait également échouer si l'image source est déplacée / renommée, et serait généralement un choix inférieur à l'option ajax.

Il ya donc plusieurs façons différentes d'essayer et de détecter ce, aucun parfait, mais en l'absence de la possibilité de sauter hors du bac à sable de navigateur et d'accéder à l'état de connexion du net de l'utilisateur directement, ils semblent être les meilleures options.

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

l'API de Cache D'Application HTML5 spécifie navigator.en ligne, qui est actuellement disponible dans le IE8 betas, WebKit (eg. Safari) nightlies, et est déjà pris en charge dans Firefox 3

comme dit olliej, l'utilisation de la propriété navigator.onLine du navigateur est préférable à l'envoi de requêtes réseau et, en conséquence avec developer.mozilla.org/En/Online_and_offline_events , il est même supporté par les anciennes versions de Firefox et IE.

récemment, le WHATWG a spécifié l'ajout des événements online et offline , au cas où vous devez réagir sur navigator.onLine changements.

s'il vous Plaît faites également attention au lien posté par Daniel Silveira qui souligne que compter sur ces signal/propriété pour se synchroniser avec le serveur n'est pas toujours une bonne idée.

vous pouvez utiliser $.ajax () 's error callback, qui déclenche si la requête échoue. Si textStatus est égal à la chaîne "timeout", cela signifie probablement que la connexion est rompue:

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

du doc :

Erreur : Une fonction à appeler si la demande échouer. La fonction est passée trois arguments: l'objet XMLHttpRequest, chaîne Description du type d'erreur cela s'est produit et une option objet d'exception, s'il y en a eu un. Valeurs possibles pour la seconde l'argument (en plus de null) est "timeout"", "erreur", "notmodified" et "parsererror". C'est un événement Ajax

ainsi par exemple:

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

j'ai dû faire une application web (ajax) pour un client qui travaille beaucoup avec les écoles, ces écoles ont souvent une mauvaise connexion internet-je utiliser cette fonction simple pour détecter si il y a une connexion, fonctionne très bien!

j'utilise CodeIgniter et 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();
        }
    });
}

un appel ajax à votre domaine est le moyen le plus facile de détecter si vous êtes hors ligne""

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

c'est juste pour vous donner le concept, il faut l'améliorer, vérifier les codes d'état http etc

je pense que c'est très 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;
}

je cherchais une solution côté client pour détecter si internet était en panne ou si mon serveur était en panne. Les autres solutions que j'ai trouvées semblaient toujours dépendre d'un fichier ou d'une image de script de tierce partie, ce qui, à mes yeux, ne semblait pas devoir résister à l'épreuve du temps. Un script ou une image hébergé externe pourrait changer dans le futur et causer le code de détection d'échouer.

j'ai trouvé un moyen de le détecter en cherchant un xhrStatus avec un code 404. En outre, j'utilise JSONP pour contourner la restriction CORS. Un code d'état autre que 404 indique que la connexion internet ne fonctionne pas.

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

Très intéressant script qui reprend beaucoup de ci-dessus:

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

il est très utile, et parce qu'il est basé sur Ajax, est asyncrone, de sorte que vous pouvez vérifier si L'Internet est conected sans quitter la page d'origine. En utilisant ceci avec une minuterie, vous pouvez aussi avoir un composant dans la page vérifiant toutes les n minutes.

à ma façon.

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

il y a 2 réponses à cette question pour deux senarios différents: -

1. si vous utilisez JavaScript sur un site web(I. e; ou toute partie avant) La façon la plus simple de le faire est:

   <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. mais si vous utilisez js du côté du serveur(I. e; noeud etc.), Vous pouvez déterminer que la connexion est perdue en faisant des requêtes XHR échouées.

   l'approche standard consiste à réessayer la demande à quelques reprises. Si elle ne passe pas, alertez l'utilisateur pour vérifier la connexion, et échouez avec élégance.

chef de requête en erreur de requête

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

voici un extrait d'un helper utility que j'ai. C'est javascript namespacé:

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

vous devriez utiliser ceci avec la méthode de détection sinon tirer sur une "alternative" façon de le faire. Le temps approche rapidement quand ce sera tout ce qui est nécessaire. Les autres méthodes sont les hacks.