首页 > 代码库 > HTML5 --- navigator.onLine 离线检测

HTML5 --- navigator.onLine 离线检测

navigator.onLine,是一个属性,返回浏览器的联网状态。主要用于查看你是否连接上了互联网。

在正常联网的情况下会返回true,没有联网即离线的状态下返回false。

一旦浏览器的联网状态发生改变时,该属性值也会随之变化。

        // 查看你是否连接上了互联网,通过window.navigator.onLine 的值进行判断,        // 如果是true,则说明连上了互联        if (navigator.onLine) {            console.log("online");        }else{            console.log("offline");        }

 

实际应用中,navagator.online在不同的浏览器之间存在着差异。
在Chrome和Safari中,如果浏览器连接不上局域网 (LAN)或者路由器,就是离线状态;否则就是在线状态。
在Firefox和Internet Explorer中,如果浏览器处于"脱机工作"状态,则返回 false,其他情况都返回true.
所以当该属性值为false的时候,你可以说浏览器不能正常联网,但如果该属性值为true的时候,并不意味着浏览器一定能连接上互联网。

 

因此为了更好地确定网络连接是否可用,HTML5还为我们定义了两个事件:online和offline。

可以使用addEventListener在window.onOnline和window.onOffline上监听事件,来获取浏览器联网状态的改变情况.

        // 使用window.onOnline和window.onOffline事件, 监听浏览器的联网状态        window.addEventListener("online", function(){            console.log("浏览器连上了网络");        });        window.addEventListener("offline", function(){            console.log("浏览器未连上了网络");        });

 

注意:
  1、检测ononline事件,要绑定在window对象上
  2、当浏览器从在线和离线的状态中进行切换死,这两个事件会在页面的body上触发。
     online与offline事件会从document.body冒泡到document上,最后到达window。这两个事件都无法被取消,因为你无法阻止用户进入在线或离线状态。

 

Link:

https://developer.mozilla.org/zh-CN/docs/Web/API/NavigatorOnLine/onLine

https://developer.mozilla.org/zh-CN/docs/Online_and_offline_events

 

HTML5 --- navigator.onLine 离线检测