首页 > 代码库 > 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 离线检测