需求:用户考试答题页面如果断网,需弹窗提示用户检查网络
1. navigator.onLine
联网的情况是返回true
if (navigator.onLine) {
console.log('网络已连接');
} else {
console.log('已断网');
}
2. window.addEventListener()
主动监听当前网络连接状态
window.addEventListener('online', function() {
console.log('网络已连接');
});
window.addEventListener('offline', function() {
console.log('已断网');
});
注意:在苹果电脑上面有兼容性问题,监听失效
3. 更加兼容的写法
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(window, "online", function() {
console.log("联网");
});
EventUtil.addHandler(window, "offline", function() {
console.log("断网");
});