Detectar se o browser estar offline ou online

you are in: codestacker → codes [RSS] → Detectar se o browser estar offline ou online

Como detectar que seu browser estar offline ou online utilizando de jQuery?
Esse código foi montado e capturado na internet. Por tanto náo é meu.
Agora não sei de quem são os créditos.

Com ele temos como mostrar para o usuário que sua conexão esta offline.

show/hide lines

   1  <script type="text/javascript">
   2  		jQuery.networkDetection = function(url,interval){
   3  			
   4  			var url = url;
   5  			var interval = interval;
   6  			online = false;
   7  			this.StartPolling = function(){
   8  				this.StopPolling();
   9  				this.timer = setInterval(poll, interval);
  10  			};
  11  			
  12  			this.StopPolling = function(){
  13  				clearInterval(this.timer);
  14  			};
  15  			
  16  			this.setPollInterval= function(i) {
  17  				interval = i;
  18  			};
  19  			
  20  			this.getOnlineStatus = function(){
  21  				return online;
  22  			};
  23  			
  24  			function poll() {
  25  				jQuery.ajax({
  26  					type: "POST",
  27  					url: url,
  28  					dataType: "text",
  29  					error: function(){
  30  						online = false; 
  31  						jQuery(document).trigger('status.networkDetection',[false]);
  32  					},
  33  					success: function(){
  34  						online = true; 
  35  						jQuery(document).trigger('status.networkDetection',[true]);
  36  					}
  37  				});
  38  			};
  39  			
  40  			
  41  		};
  42  					
  43  		jQuery(document).ready(function(){
  44  			
  45  			network = new jQuery.networkDetection("/poll", 5000);
  46  			network.StartPolling();
  47  			
  48  			jQuery(document).bind("status.networkDetection", function(e, status){	
  49  				// subscribers can be namespaced with multiple classes
  50  				subscribers = jQuery('.subscriber.networkDetection');
  51  				// publish notify.networkDetection to subscribers
  52  				subscribers.trigger("notify.networkDetection", [status])
  53  				/*
  54  				other logic based on network connectivity could go here
  55  				use google gears offline storage etc
  56  				maybe trigger some other events
  57  				*/
  58  			});
  59  			
  60  			/* 
  61  			Listen for notify.networkDetection events. This could equally be listening
  62  			directly to status.networkDetection events
  63  			*/
  64  			jQuery('#notifier').bind("notify.networkDetection",function(e, online){
  65  				// the following simply demonstrates
  66  				notifier = jQuery(this);
  67  				if(online){
  68  					if (!notifier.hasClass("online")){
  69  						notifier.hide();
  70  						jQuery(this).addClass("online").removeClass("offline").text("Você esta online");
  71  					}
  72  				}else{
  73  					if (!notifier.hasClass("offline")){
  74  						notifier.show();
  75  						jQuery(this).addClass("offline").removeClass("online").text("Sua conexão esta falhando");
  76  					}
  77  				};
  78  			});
  79  			
  80  		});
  81  
  82  
  83  
  84  </script>
  85  
  86  <style type="text/css">
  87  	
  88  	* {
  89  		font-family:verdana, arial, helvetica, sans-serif;
  90  		font-weight:bold;
  91  	}
  92  	
  93  	#notifier{
  94  		border:1px solid #CCCCCC;
  95  		color:#333333;
  96  		margin-left:36%;
  97  		padding:20px;
  98  		position:absolute;
  99  		text-align:center;
 100  		width:300px;
 101  	}
 102  	
 103  	#notifier.online{
 104  		color:#fff;
 105  		background:#3c3;
 106  		border-color:#3c3;
 107  	}
 108  	
 109  	#notifier.offline{
 110  		color:#fff;
 111  		background:#f66;
 112  		border-color:#f66;
 113  	}
 114  	
 115  	
 116  </style>
 117  
 118  
 119  <body class="pagLogin">
 120  	
 121  	<div id="notifier" style="display: none;" class="subscriber networkDetection online">ONLINE</div>
 122  	
 123  </body>

<script type="text/javascript">
		jQuery.networkDetection = function(url,interval){
			
			var url = url;
			var interval = interval;
			online = false;
			this.StartPolling = function(){
				this.StopPolling();
				this.timer = setInterval(poll, interval);
			};
			
			this.StopPolling = function(){
				clearInterval(this.timer);
			};
			
			this.setPollInterval= function(i) {
				interval = i;
			};
			
			this.getOnlineStatus = function(){
				return online;
			};
			
			function poll() {
				jQuery.ajax({
					type: "POST",
					url: url,
					dataType: "text",
					error: function(){
						online = false; 
						jQuery(document).trigger('status.networkDetection',[false]);
					},
					success: function(){
						online = true; 
						jQuery(document).trigger('status.networkDetection',[true]);
					}
				});
			};
			
			
		};
					
		jQuery(document).ready(function(){
			
			network = new jQuery.networkDetection("/poll", 5000);
			network.StartPolling();
			
			jQuery(document).bind("status.networkDetection", function(e, status){	
				// subscribers can be namespaced with multiple classes
				subscribers = jQuery('.subscriber.networkDetection');
				// publish notify.networkDetection to subscribers
				subscribers.trigger("notify.networkDetection", [status])
				/*
				other logic based on network connectivity could go here
				use google gears offline storage etc
				maybe trigger some other events
				*/
			});
			
			/* 
			Listen for notify.networkDetection events. This could equally be listening
			directly to status.networkDetection events
			*/
			jQuery('#notifier').bind("notify.networkDetection",function(e, online){
				// the following simply demonstrates
				notifier = jQuery(this);
				if(online){
					if (!notifier.hasClass("online")){
						notifier.hide();
						jQuery(this).addClass("online").removeClass("offline").text("Você esta online");
					}
				}else{
					if (!notifier.hasClass("offline")){
						notifier.show();
						jQuery(this).addClass("offline").removeClass("online").text("Sua conexão esta falhando");
					}
				};
			});
			
		});



</script>

<style type="text/css">
	
	* {
		font-family:verdana, arial, helvetica, sans-serif;
		font-weight:bold;
	}
	
	#notifier{
		border:1px solid #CCCCCC;
		color:#333333;
		margin-left:36%;
		padding:20px;
		position:absolute;
		text-align:center;
		width:300px;
	}
	
	#notifier.online{
		color:#fff;
		background:#3c3;
		border-color:#3c3;
	}
	
	#notifier.offline{
		color:#fff;
		background:#f66;
		border-color:#f66;
	}
	
	
</style>


<body class="pagLogin">
	
	<div id="notifier" style="display: none;" class="subscriber networkDetection online">ONLINE</div>
	
</body>

created by thiagonego — 11 September 2009 — get a short url — tags: offline online jQuery javascript — embed

codestacker

codestacker is a community to share snippets easily!

Login

Login

you are in: codestacker → codes [RSS] → Detectar se o browser estar offline ou online

Detectar se o browser estar offline ou online

Send this to a friend

Comments