标签：app eve div html5 head rip off upper btn
如今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 上使用 addEventListenerdocument 或 document.body 的 ononline 或 onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)body 标签上指定 ononline=”…” 或 onoffline=”…” 特性。注意事项：
实例代码：
<!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: 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>
用 JavaScript 检测浏览器在线/离线状态（JavaScript API?—?navigator.onLine）
标签：app eve div html5 head rip off upper btn
原文地址：http://www.cnblogs.com/goloving/p/7688167.html
