Js - 判断用户是否上网(连接网络) - HTML5在线、离线online的使用

（文中对兼容性的测试还未全部完成）

通过对html5的navigator新特性的onLine属性判断，可轻松搞定是否在线的判断（true：在线；false：离线）。

兼容性：

　　（已测）IE6+、Safari 5+支持的比较好；

　　（未测）Firefox 3+也支持navigator.onLine属性，但你必须手工选中菜单项“文件-Web开发人员（设置）-脱机工作”才能让浏览器正常的工作；

　　（未测）Chrome需要12以上；

1、代码实现：

　　if(window.navigator.onLine==true) {　

　　　　alert("首次 -- 已连接");

　　}else {　

　　　　alert("首次 -- 未连接");

　　}

　　window.addEventListener("online", online, false);

　　window.addEventListener("offline", offline, false);

　　function online() {  alert("重新连接");  }

　　function offline() {  alert("连接断开");  }

2、更兼容的写法：

　　var EventUtil = { 

　　　　addHandler: function (element, type, handler) { 

　　　　　　if(element.addEventListener) { 

　　　　　　　　element.addEventListener(type, handler, false); 

　　　　　　}else if (element.attachEvent) {

　　　　　　　　element.attachEvent("on" + type, handler); 

　　　　　　}else { 

　　　　　　　　element["on" + type] = handler;

　　　　　　} 

　　　　}

　　 }; 

　　EventUtil.addHandler(window, "online", function () { alert("Online"); }); 

　　EventUtil.addHandler(window, "offline", function () { alert("Offline"); });

3、分析及步骤：

　　为了检测应用是否离线，通过监听事件：online和offline。当网络从离线变为在线或者从在线变为离线时，（在window对象上触发）分别触发这两个事件。

　　首先：在页面加载后，最好先通过navigator.onLine取得初始的状态。

　　其次：通过对上述两个事件的监听来确定网络连接状态是否变化。（navigator.onLine属性值）

 

水平有限，文中错误不妥在所难免，欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢！

 

本文参考自：HTML5离线功使用能详解

http://www.educity.cn/wenda/11745.html

转载于:https://www.cnblogs.com/libinblog/p/4239269.html