Code d'implémentation pour la détection javascript des compétences Internet access_javascript

Le moyen le plus simple et le plus grossier consiste à charger des ressources réseau, des fichiers JS ou des fichiers image.

Copier le code Le code est le suivant :

typeof window.jQuery === "undefined" // renvoie false ou true

Utilisez les variables jQuery pour détecter si vous êtes connecté à Internet

function doConnectFunction() {
  return true;
}
function doNotConnectFunction() {
  return false;
}

 var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
i.src = 'http://su.bdimg.com/static/superplus/img/logo_white.png?d=' + escape(Date());

Le problème avec le chargement des ressources réseau est la détection d'Internet. S'il s'agit d'une détection LAN, vous ne pouvez rien faire.
Pour le moment, nous avons besoin d'une meilleure solution, nous devons donc utiliser navigator.onLine. L'inconvénient de cet attribut est qu'il est compatible avec les navigateurs Chrome et Safari qui le prennent tous parfaitement en charge, et IE7 et supérieur sont pris en charge. Firefox et IE6 sont plus pitoyables. Ils ne renvoient false que lorsque le navigateur est "hors ligne", et renvoient true dans le cas contraire. C'est vrai même si le câble réseau est pincé, mais Opera ne le prend plus en charge.

Il faut donc ajouter une méthode de compatibilité : envoyer une requête d'en-tête http à l'adresse location.hostname, le code est le suivant :

var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
 try {
  xhr.send();
  return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
 } catch (error) {
  return false;
 }

Une chose à noter est que le troisième paramètre de la méthode open doit être passé false et qu'il doit s'agir d'une requête synchrone.

Résumé : Si le navigateur prend en charge navigator.onLine, utilisez navigator.onLine. S'il ne le prend pas en charge, envoyez une requête d'en-tête http.

Article original, veuillez l'indiquer lors de la réimpression : Réimprimé de Développement Front-end