如今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;
100%;
font: bold 1em sans-serif;
color: #FFF;
padding: 0.5em;
}
#log {
padding: 2.5em 0.5em 0.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）