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 离线检测

标签：

原文地址：http://www.cnblogs.com/guashi/p/5877800.html