用 JavaScript 检测浏览器在线/离线状态（JavaScript API

　　如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术，所以用 JavaScript 检测浏览器在线/离线状态非常常见。

　　无论浏览器是否在线，navigator.onLine 属性都会提供一个布尔值。如果浏览器在线，则设置为 true ，否则设置为 false 。

    if(navigator.onLine) { // true|false

        // ...

    }

online 和 offline 事件：

　　当浏览器脱机或上线时，浏览器还支持 online 和 offline 事件。

window.addEventListener('online', function(e){console.log('online')});

window.addEventListener('offline', function(e){console.log('offline');});

　　你可以使用几种熟悉的方式来注册事件：

在 window，document，或 document.body 上使用 addEventListener
将 document 或 document.body 的 ononline 或 onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
在 HTML 标记中的 body 标签上指定 ononline=”…” 或 onoffline=”…” 特性。

　　注意事项：

IE8中需要给document.body绑定事件而不是window
在线离线的变化指的是物理上的网络链接变化，如果是在控制台将网络限制为 offline 则不会触发相应的事件。

实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）</title>

    <style type="text/css">

        #status {

            position: fixed;

            width: %;

            font: bold 1em sans-serif;

            color: #FFF;

            padding: .5em;

        }

        #log {

            padding: .5em .5em .5em;

            font: 1em sans-serif;

        }

        .online {

            background: green;

        }

        .offline {

            background: red;

        }

    </style>

</head>

<body>

<div id="status"></div>

<div id="log"></div>

<button type="button" id="test">检查状态</button>

<script>

window.addEventListener('load', function () {

    var testBtn = document.getElementById("test");

    var status = document.getElementById("status");

    var log = document.getElementById("log");

    function updateOnlineStatus(event) {

        var condition = navigator.onLine ? "online" : "offline";

        status.className = condition;

        status.innerHTML = condition.toUpperCase();

        log.insertAdjacentHTML("beforeend", "Event: " + (event?event.type:"-") + "; Status: " + condition+ " | ");

    }

    window.addEventListener('online', updateOnlineStatus);

    window.addEventListener('offline', updateOnlineStatus);

    testBtn.addEventListener("click", updateOnlineStatus);

    updateOnlineStatus();

});

</script>

</body>

</html>

总结：

　　1、navigator.online属性提供浏览器是否在线的布尔值

　　2、浏览器脱机或上线还支持online和offline事件（IE8需要给document.body绑定事件而不是window）