李游Leo小课堂:
每天一个前端冷知识系列之用JS判断手机有没有网络。
更多干货推荐:
漫画:什么是平衡二叉树?
干货!浅析通用支付模块
必读!新版vue-router的hooks用法
1
第一种方法
HTML5 的 navigator 的新特性可以很简单帮我们搞定。 因为 HTML5 为此定义了一个 navigator.onLine 属性。
function demo1() {
if (navigator.onLine) { //正常工作
alert("正常工作");
}
else { //执行离线状态时的任务
alert("不在线");
}
}
是不是很简单暴力?
其实就是一个属性就搞定了。
当然,我们还有其他的方法,也可以利用事件绑定的方式,绑定 window 对象上的 ononline 属性,然后进行操作即可。为了兼容,我们还可以进行封装,让IE浏览器也支持。
2
第二种方法
function demo2() {
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 () {
alert("正常工作");
});
EventUtil.addHandler(window, "offline", function () {
alert("不在线");
});
}
![6d98cfa484aabb90b51cf66fb78c0215.png](https://i-blog.csdnimg.cn/blog_migrate/21d5ee7de6de7214b557d69b22996dea.png)
![2610c7ae37d90599d8d7d282a9803534.png](https://i-blog.csdnimg.cn/blog_migrate/4618d31b3c76ccfc83e6b0b31c5ab156.png)