222 votes

Vérifiez si Internet Connection existe avec Javascript?

Comment vérifiez-vous s'il y a une connexion Internet en utilisant Javascript? De cette façon, je pourrais avoir quelques conditions disant "utiliser la version mise en cache google de JQuery pendant la production, utilisez cette version ou une version locale pendant le développement, en fonction de la connexion Internet".

270voto

Joseph Silvashy Points 14960

La meilleure option pour votre cas particulier pourrait être:

Juste avant votre proche </body> balise:

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

C'est probablement le moyen le plus facile étant donné que votre problème est centrée autour de jQuery.

Si vous voulez une solution plus robuste que vous pourriez essayer:

var online = navigator.onLine;

En lire plus sur les normes du W3C spec sur hors-ligne les web-apps, cependant, soyez conscient que cela fonctionne mieux dans les navigateurs web modernes, de le faire avec les anciens navigateurs web peuvent ne pas fonctionner comme prévu, ou à tous les.

Sinon, une demande XHR pour votre propre serveur n'est pas mauvais d'une méthode de test de la connectivité. Considérant l'un de l'autre, les réponses de l'état qu'il y a trop de points de défaillance pour une XHR, si votre XHR est entaché d'erreur lors de l'établissement de son rapport, puis il va aussi être défectueux lors de l'utilisation en routine de toute façon. Si votre site est inaccessible pour une raison quelconque, vos autres services s'exécutant sur le même serveurs seront probablement inaccessible aussi. Cette décision est à vous.

Je ne vous recommande pas de faire une demande XHR pour quelqu'un d'autre, même google.com pour cette question. Faire la demande à votre serveur, ou pas du tout.

Que signifie être "en ligne"?

Il semble y avoir une certaine confusion autour de ce que signifie être "en ligne" signifie. Considérer que l'internet est un tas de réseaux, mais parfois, vous êtes sur un réseau VPN, sans accès à l'internet "at-large" ou le world wide web. Souvent, les entreprises disposent de leurs propres réseaux qui ont limité la connectivité à d'autres réseaux externes, par conséquent, vous pourriez être considéré comme "en ligne". Étant uniquement en ligne implique que vous êtes connecté à un réseau, et non pas la disponibilité et l'accessibilité des services que vous essayez de vous connecter.

J'ai écrit une petite fonction pour déterminer si un hôte est accessible à partir de votre réseau:

function hostReachable() {

  // Handle IE and more capable browsers
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
  var status;

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

}

Vous pouvez également trouver l'Essentiel pour que voici: https://gist.github.com/jpsilvashy/5725579

Les détails sur la mise en œuvre locale

Certaines personnes ont commenté, "je suis toujours retourné false". C'est parce que vous êtes probablement en train de l'essayer sur votre serveur local. N'importe quel serveur vous en faites la demande, vous devrez être en mesure de répondre à la demande HEAD, qui bien sûr peut être changé à OBTENIR si vous le souhaitez.

42voto

morespace54 Points 181

Ok, peut-être un peu tard dans le jeu mais qu'en est-il de vérifier avec une image en ligne? Je veux dire, le PO a besoin de savoir s'il doit saisir le fichier Google CMD ou le fichier JQ local, mais cela ne signifie pas que le navigateur ne peut pas lire Javascript, quoi qu'il en soit, n'est-ce pas?

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

Juste mes 2 cents

20voto

B-Money Points 601

Voici une façon de Mobiles passe-partout que j'aime et fonctionne très bien.

C'est seulement 2 lignes de la plaine du code js. Deux lignes.

http://html5boilerplate.com/mobile/

  1. Il charge jQ à partir de google cdn
  2. Il vérifie ensuite pour jQuerys existence, si elle n'est pas là, il écrit la balise pour charger votre version locale - tout à l'aide de plain vanilla js.
  3. Il n'y a pas d'étape trois !!!! Sont ya pickin' jusqu'à ce que je suis en fixant?

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    <script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")    </script>
    

14voto

Phil Rykoff Points 6650

edit: cette solution est uniquement pour les appels suivants lorsque la page est déjà chargé et nous avons besoin de détecter si nous avons toujours accès à internet. voilà comment j'ai interprété la première version de la question. navigator.en ligne est plus élégant pour le premier temps de vérifier " si.

google devrait avoir une bonne disponibilité pour ce test :-)

la première est une fonction de gestionnaire d'événement qui est seulement appelé, lorsque la fonction ne réussira pas. le rappel de la fonction sera appelée uniquement sur la réussite.

$('body').ajaxError(function() {
  alert("failed");
});

$.get('http://www.google.de', function(data) {
  alert("success");
});

6voto

Vitim.us Points 3340

Vous pouvez imiter la commande Ping.

Utilisez Ajax pour demander un horodatage à votre propre serveur, définissez une minuterie en utilisant setTimeout à 5 secondes, s'il n'y a pas de réponse, essayez à nouveau.

S'il n'y a pas de réponse en 4 tentatives, vous pouvez supposer qu'Internet est en panne.

Donc, vous pouvez vérifier en utilisant cette routine à intervalles réguliers, comme 1 ou 3 minutes.

Cela semble une bonne et propre solution pour moi.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X