H5判断网络状态

首先推荐一个网站，介绍H5 API的：https://github.com/AurelioDeRosa/HTML5-API-demos

netWork API:http://wicg.github.io/netinfo/

1.判断网络连接的网络状态

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

想要监听浏览器的联网状态, 使用window.onOnline和window.onOffline事件:

window.addEventListener("offline", function(e) {alert("offline");})
 
window.addEventListener("online", function(e) {alert("online");})

更为安全的做法：

var el = document.body;  
if (el.addEventListener) {  
   window.addEventListener("online", function () {  
     alert("online");}, true);  
   window.addEventListener("offline", function () {  
     alert("offline");}, true);  
}  
else if (el.attachEvent) {  
   window.attachEvent("ononline", function () {  
     alert("online");});  
   window.attachEvent("onoffline", function () {  
     alert("offline");});  
}  
else {  
   window.ononline = function () {  
     alert("online");};  
   window.onoffline = function () {  
     alert("offline");};  
}  

注意，检测ononline事件,要绑定在window对象上 
attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8