您的位置：首页 > Web前端 > JavaScript

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

2017-10-18 18:27 417 查看
　　如今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: 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）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航