网络状态属性
window.navigator.onLine 返回浏览器的网络状态。联网状态时返回true，断网状态时返回false。
注意：各浏览器对该属性的实现有些不同。
在Chrome和Safari中，如果浏览器连接不上局域网 (LAN)或者路由器，就是断网状态；否则就是联网状态。所以当该属性值为false的时候，你可以说浏览器不能正常联网，但如果该属性值为true的时候，并不意味着浏览器一定能连接上互联网。还有其他一些可能引起误判的原因，比如你的电脑安装了虚拟化软件，可能会有一个虚拟网卡，这时它总是会显示正常联网。
在Firefox和Internet Explorer中，如果浏览器处于"脱机工作"状态，则返回 false，其他情况都返回true。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>network status</title>
</head>
<body>
<script type="text/javascript">
// 获取当前网络状态
var state = window.navigator.onLine;
if (state) {
alert("联网状态");
}
else {
alert("断网状态");
}
</script>
</body>
</html>
网络状态事件
- 联网时触发
// 不推荐，有兼容性问题
window.ononload = function() {}
或
// 推荐
window.addEventListener('online', function() {});
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>online event</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener('online', function() {
alert("在线");
});
</script>
</body>
</html>
- 断网时触发
// 不推荐，有兼容性问题
window.onoffline = function() {}
或
// 推荐
window.addEventListener('offline', function() {});
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offline event</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener('offline', function() {
alert("在掉线");
});
</script>
</body>
</html>
网友评论