Maison > interface Web > js tutoriel > Comment javascript détecte le réseau

Comment javascript détecte le réseau

藏色散人
Libérer: 2023-01-06 11:14:10
original
8611 Les gens l'ont consulté

Méthodes permettant à JavaScript de détecter le réseau : 1. Détecter le réseau via le navigateur ; 2. Utiliser les événements "window.ononline" et "window.onoffline" pour surveiller l'état du réseau du navigateur ; 3. Détecter le réseau via ; requête ajax.

Comment javascript détecte le réseau

L'environnement d'exploitation de cet article : système Windows7, javascript version 1.8.5, ordinateur DELL G3

JavaScript pour déterminer l'état du réseau

1 De manière générale, le navigateur fourni par HTML5 est utilisé pour déterminer l'état du réseau

<script type="text/javascript">
	// 通过window.navigator.onLine 来检测网络是否可用
    alert(window.navigator.onLine); // 返回的是一个bool值(true表示已连接,false表示未连接)
</script>
Copier après la connexion

. Comment javascript détecte le réseau

2. Si vous souhaitez surveiller l'état du réseau du navigateur, utilisez les événements window.ononline et window.onoffline :

<script type="text/javascript">
    window.addEventListener("offline",function(){alert("网络连接恢复");})
    window.addEventListener("online",function(){alert("网络连接中断");})
</script>
Copier après la connexion

ou :

<script type="text/javascript">
    window.ononline=function(){alert("网络连接恢复");}
    window.onoffline=function(){alert("网络连接中断");}
</script>
Copier après la connexion

Comment javascript détecte le réseau
Remarque : Cette méthode appartient au "écouteur" et ne sera déclenchée qu'au moment où le réseau sera connecté/déconnecté.

Résumé : navigator.onLine et online, offline les événements ne sont pas omnipotents Côté PC, il peut uniquement déterminer si les câbles sans fil et réseau sont connectés, mais pas. s'il existe un réseau, si vous pouvez accéder à Internet.

Une approche plus sûre :

<script type="text/javascript">
	var el = document.body;  
	if (el.addEventListener) {  
	   window.addEventListener("online", function () {  
	     alert("网络连接恢复");}, true);  
	   window.addEventListener("offline", function () {  
	     alert("网络连接中断");}, true);  
	}  
	else if (el.attachEvent) {  
	   window.attachEvent("ononline", function () {  
	     alert("网络连接恢复");});  
	   window.attachEvent("onoffline", function () {  
	     alert("网络连接中断");});  
	}  
	else {  
	   window.ononline = function () {  
	     alert("网络连接恢复");};  
	   window.onoffline = function () {  
	     alert("网络连接中断");};  
	}  
</script>
Copier après la connexion

Notez que pour détecter l'événement ononline, il doit être lié à l'objet window

attachEvent - compatible avec : IE7, IE8 ; non compatible avec Firefox, Chrome, IE9, IE10, IE11, Safari, Opera
addEventListener - compatible avec : Firefox, Chrome, IE, Safari, Opera non compatible avec IE7, IE8 ;

Apprentissage recommandé : "Tutoriel JavaScript avancé"

3. Vous pouvez lancer une requête ajax et déterminer la connectivité réseau en fonction de celle-ci. le résultat de la requête

<script type="text/javascript">
	$.ajax({
	  url: &#39;https://sug.so.360.cn/suggest&#39;,
	  dataType:&#39;jsonp&#39;,
	  success: function(result){
	    console.log(&#39;网络正常&#39;)
	  }, 
	  error: function(result){
	    console.log(&#39;网络异常&#39;)
	  }
	});
</script>
Copier après la connexion

Bien sûr, cette méthode n'est pas parfaite, et elle n'est pas très pratique. Elle ne peut pas bien distinguer s'il y a une panne de serveur ou un problème avec le réseau de l'utilisateur, mais c'est bien le plus. manière efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal