判断是否网络断了

jaywcjlove · Feb 15, 2015 · 407fa0f · 407fa0f
commit 407fa0f
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,22 @@
+## 判断是否网络断了
+
+### 设置轮询时间和地址
+
+> `time` 设置轮询时间
+> `url` 当 `url`为空的时候 默认所有浏览器使用 onLine 和 offline事件
+
+### 侦听是否连上网络
+
+```js
+window.onLineHandler = function(){
+    console.log("连上了！")
+};
+```
+
+### 侦听是否断开网络
+
+```js
+window.offLineHandler = function(){
+    console.log("断开网络！")
+};
+```# onlinenetwork
diff --git a/online.js b/online.js
@@ -0,0 +1,119 @@
+;(function(w){
+    var xmlhttp = new XMLHttpRequest(),
+    	time=2000,//设置轮询时间
+    	url="http://********.com/online.php";
+    	//当 `url`为空的时候 默认所有浏览器使用 onLine 和 offline事件
+
+    w.onlinenetwork = w.onlinenetwork || {};
+	w.onlinenetwork = {
+		setStatus:function (newStatus) {
+			this.eventStatus(newStatus);
+			w.onLine = newStatus;
+		},
+		//状态改变执行事件
+		eventStatus: function (newStatus) {
+			if (newStatus === true && w.onLineHandler !== undefined && (w.onLine !== true || this.handlerFired === false)) {
+				w.onLineHandler();
+			}
+			if (newStatus === false && w.offLineHandler !== undefined && (w.onLine !== false || this.handlerFired === false)) {
+			    w.offLineHandler();
+			}
+			this.handlerFired = true;
+		},
+		//http请求
+		XMLHttpLogic:function (async) {
+			var url = this.getOnLineCheckURL(),
+                self = this;
+            if(async){
+                xmlhttp.onreadystatechange = function () {
+                    if (xmlhttp.readyState === 4) {
+                        try {
+                            self.processXmlhttpStatus();
+                        } catch (err) {
+                            self.setStatus(false);
+                        }
+                    }
+                };
+            }else{
+                xmlhttp.onreadystatechange = undefined;
+            }
+			xmlhttp.open("HEAD", url, async)
+            this.tryToSend(xmlhttp);
+		},
+        processXmlhttpStatus: function () {
+            var tempOnLine = w.onlinenetwork.verifyStatus(xmlhttp.status);
+            this.setStatus(tempOnLine);
+        },
+        //尝试发送请求
+        tryToSend:function (xmlhttprequest) {
+            try {
+                xmlhttprequest.send();
+            } catch(e) {
+                this.setStatus(false);
+            }
+        },
+        //确认状态
+        verifyStatus:function (status) {
+            return status === 200;
+        },
+		//url加上随机数
+		getOnLineCheckURL: function () {
+			return url + '?' + Math.floor(Math.random() * 1000000);
+		},
+		//非 chrome 和 Safari 浏览器不停的检查，嘿嘿
+		startCheck:function(){
+			setInterval("window.onlinenetwork.XMLHttpLogic(true)",time);
+		},
+        //第一次检查是否在线
+        checkOnLine:function(){
+            this.XMLHttpLogic(false)
+        },
+        getStatusFromNavigatorOnLine:function () {
+            if (w.navigator.onLine !== undefined) {
+                this.setStatus(w.navigator.onLine);
+            } else {
+                this.setStatus(true);
+            }
+        },
+		//判断浏览器
+		getExplorer: function(newStatus){
+			var explorer = window.navigator.userAgent;
+            this.setStatus(newStatus)
+
+            console.log("test:3",url)
+			if((explorer.indexOf('Firefox') >= 0 || explorer.indexOf('MSIE') >= 0)&&url){
+				console.log("test:1")
+                this.checkOnLine()
+                this.setStatus(newStatus)
+                this.startCheck(newStatus)
+            }else{
+				console.log("test:2")
+                this.eventStatus(newStatus)
+			}
+		},
+		//绑定事件
+		addEvent: function (obj, type, callback) {
+			if (window.attachEvent) obj.attachEvent('on' + type, callback);
+			else obj.addEventListener(type, callback);
+		},
+		init:function(){
+
+			var self = this
+            //获取当前状态
+			this.addEvent(w, 'load', function () {
+                self.eventStatus(w.onLine);
+            });
+
+			//侦听 online 事件
+			this.addEvent(w, 'online', function () { self.getExplorer(true) });
+
+			//侦听 offline 事件
+			this.addEvent(w, 'offline', function () { self.getExplorer(false) });
+
+            self.getExplorer(true) 
+			this.handlerFired = false;
+		}
+	}
+	w.onlinenetwork.init()
+
+})(window);
diff --git a/test.html b/test.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+	<script type="text/javascript" src="online.js"></script>
+</head>
+<body>
+<script type="text/javascript">
+
+window.onLineHandler = function(){
+	console.log("连上了！")
+};
+window.offLineHandler = function(){
+	console.log("断开网络！")
+};
+</script>
+</body>
+</html>