Vérifiez si la connexion Internet existe avec Javascript?
Comment vérifier s'il existe une connexion Internet utilisant Javascript? Ainsi, certaines conditions pourraient indiquer "utiliser la version cachée de JQuery pendant la production, utilisez-la ou une version locale au cours du développement, en fonction de la connexion Internet".
La meilleure option pour votre cas spécifique pourrait être:
Juste avant votre balise </body> close:
<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>
C'est probablement le moyen le plus simple, car votre problème est centré sur jQuery.
Si vous vouliez une solution plus robuste, essayez:
var online = navigator.onLine;
En savoir plus sur le spécification du W3C sur les applications Web hors connexion , sachez toutefois que cela fonctionnera mieux avec les navigateurs Web modernes. Cela ne fonctionnera peut-être pas, voire plus, avec des navigateurs Web plus anciens.
Alternativement, une requête XHR sur votre propre serveur n’est pas une mauvaise méthode pour tester votre connectivité. Dans l'une des autres réponses, il est indiqué qu'il y a trop de points d'échec pour une XHR. Si votre XHR est défectueuse lors de l'établissement de sa connexion, elle le sera également lors d'une utilisation courante. Si votre site est inaccessible pour une raison quelconque, vos autres services exécutés sur les mêmes serveurs le seront probablement également. Cette décision est à vous.
Je ne recommanderais pas de faire une demande XHR au service de quelqu'un d'autre, même google.com d'ailleurs. Faites la demande sur votre serveur ou pas du tout.
Qu'est-ce que cela signifie d'être "en ligne"?
Il semble y avoir une certaine confusion autour de ce que signifie "en ligne". Considérez qu’Internet est un ensemble de réseaux, mais vous êtes parfois sur un VPN, sans accès à Internet "en général" ou sur le World Wide Web. Souvent, les entreprises ont leurs propres réseaux qui ont une connectivité limitée à d’autres réseaux externes, vous pouvez donc être considéré comme "en ligne". Être en ligne implique uniquement que vous êtes connecté à un réseau , pas à la disponibilité ni à l'accessibilité des services auxquels vous essayez de vous connecter.
Pour déterminer si un hôte est accessible depuis votre réseau, vous pouvez procéder comme suit:
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;
}
}
Vous pouvez également trouver la Gist pour cela ici: https://Gist.github.com/jpsilvashy/5725579
Détails sur la mise en œuvre locale
Certaines personnes ont commenté "je me fais toujours retourner faux". C'est parce que vous le testez probablement sur votre serveur local. Quel que soit le serveur sur lequel vous faites la demande, vous devez être en mesure de répondre à la demande HEAD, ce qui peut bien entendu être remplacé par un GET si vous le souhaitez.
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 doit savoir s’il doit saisir le CMD de Google ou la copie JQ locale, mais cela ne veut pas dire que le navigateur ne peut pas lire le Javascript, quoi qu’il en soit, pas vrai?
<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
5 ans plus tard-version:
Aujourd'hui, il existe des bibliothèques JS pour vous, si vous ne voulez pas entrer dans les détails des différentes méthodes décrites sur cette page.
L'un d'entre eux est https://github.com/hubspot/offline . Il vérifie la connectivité d'un URI prédéfini, par défaut votre favicon. Il détecte automatiquement quand la connectivité de l'utilisateur a été rétablie et fournit des événements soignés tels que up et down, auxquels vous pouvez vous connecter pour mettre à jour votre interface utilisateur.
Vous pouvez imiter la commande Ping.
Utilisez Ajax pour demander un horodatage à votre propre serveur, définissez une minuterie à l'aide de setTimeout sur 5 secondes, s'il n'y a pas de réponse, essayez à nouveau.
S'il n'y a pas de réponse après 4 tentatives, vous pouvez supposer qu'Internet est en panne.
Ainsi, vous pouvez vérifier l’utilisation de cette routine à intervalles réguliers, par exemple 1 ou 3 minutes.
Cela semble une bonne solution pour moi.
Vous pouvez essayer d'envoyer plusieurs fois des demandes XHR. Si vous obtenez des erreurs, cela signifie qu'il y a un problème de connexion Internet.
Modifier: J'ai trouvé ce script JQuery qui fait ce que vous demandez, je ne l'ai pas testé cependant.
J'ai écrit un plugin jQuery pour le faire. Par défaut, il vérifie l'URL actuelle (car il est déjà chargé une fois à partir du Web) ou vous pouvez spécifier une URL à utiliser en tant qu'argument. Toujours faire une demande à Google n'est pas la meilleure idée, car elle est bloquée dans différents pays à différents moments. Vous pourriez aussi être à la merci de ce que pourrait être la connexion entre un océan/un climat particulier/un climat politique ce jour-là.