资讯专栏INFORMATION COLUMN

js 判断是否网络断了

aervon / 2532人阅读

摘要:方法二轮询你懂的方法三利用的事件通过轮询生成通过的事件判断是否断网此方法弱点就是耗流量一像素的空轮询一次手机上用那就蛋疼了这个样子就会偷偷跑流量。

最佳方法:
  

结合下面的方法混合使用

IEFirefox上使用Ajax轮询检查网络是否断了,其他浏览器上使用 onlineoffline事件 侦听网络。

下载地址:onlinenetwork for github

引用
html
    

设置轮询时间和地址
  

time: 时间不设置默认2000
url:不设置默认所有浏览器用 onlineoffline事件

jsvar net = onlinenetwork({
    "time":1000,
    "url":"http://*******.com/ping.php"
})
连上网络执行
jsnet.onLineHandler(function(){
    console.log("连上了!")
})
断开网络执行
jsnet.offLineHandler(function(){
    console.log("断开网络!")
})
一般判断方法: 方法一:利用online和offline事件
  

此方法是通过 onlineoffline 事件来侦听是否断网,但是这个在 IEFirefox 中,并非断网了就是真的断网了。(如火狐中在选择 菜单>>文件>>脱机工作才会触发 onlineoffline 事件)

总之在IEFirefox中一般情况下不能触发这俩事件,只有在选择脱机状态下才能触发此事件。

jswindow.addEventListener("load", function() {
    var status = document.getElementById("status");
    function updateOnlineStatus(event) {
        var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();
    }
    window.addEventListener("online",  updateOnlineStatus);
    window.addEventListener("offline", updateOnlineStatus);
});
方法二:Ajax轮询
  

你懂的

jssetInterval(function(){
    //Ajax...
},1000)
方法三:利用IMG的onerror事件
  

通过轮询生成 IMG 通过 imgonerror 事件判断是否断网
此方法弱点就是耗流量(一像素的空gif 轮询一次 1.43KB )手机上用那就蛋疼了(这个样子就会偷偷跑流量...)。

jssetInterval(function(){
    var $img = $("")
    $img.appendTo("body").css("display","none").load(function(){
        console.log("连接成功!")
        $(this).remove()
    }).error(function(){
        console.log("断网了!")
        $(this).remove()
    })
},2000)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85544.html

相关文章

  • 2018年腾讯前端二面总结(面向2019届学生)

    摘要:前言很认真的说吧,在和腾讯面试官的面试的过程。腾讯二面自我介绍二面的面试官和一面不是同一个面试官,所以在这个时候,我的基本介绍还是和一面一样,介绍自己的基本信息,以及怎么想到学习前端和怎么学习前端。 前言 很认真的说吧,在和腾讯面试官的面试的过程。有点感觉是在聊天一样,他们是面试官,但是感觉更像是引路人,不管结果的好坏,在腾讯面试的过程,只要你认真去听去问,就可以学到很多东西吧。 如果...

    gself 评论0 收藏0
  • 脑裂是什么?Zookeeper是如何解决的?

    摘要:本篇文章着重来给大家讲一下中的脑裂问题,以及是如果解决脑裂问题的。过半机制在领导者选举的过程中,如果某台获得了超过半数的选票,则此就可以成为了。就是为了防止脑裂。有痛点才有创新,一个技术肯定都是为了解决某个痛点才出现的。 什么是脑裂 脑裂(split-brain)就是大脑分裂,也就是本来一个大脑被拆分了两个或多个大脑,我们都知道,如果一个人有多个大脑,并且相互独立的话,那么会导致人体手...

    android_c 评论0 收藏0
  • HTTP面试指南

    摘要:报文主体并不是一定要有的。缓存缓存作用减少了冗余的数据传输,节省了网费。当资源发生改变时,也随之发生变化。本人水平有限,有不足之处,望大家指出改正。 前言 或许你在面试时遇到过这样的问题:从输入URL到浏览器显示页面发生了什么?简单的回答就是: DNS解析 TCP建立连接 发送HTTP请求 服务器处理请求 如果有缓存直接读缓存 没有缓存返回响应内容 TCP断开连接 浏览器解...

    FreeZinG 评论0 收藏0
  • 请给公有云多些成长空间

    最近公有云不够太平,在阿里云故障、AWS故障、谷歌云故障之后,腾讯云也挂了……,几大公有云频频出现故障,一时让很多上云的小伙伴们无从选择,还能有靠谱点的吗?其实,关于公有云的故障,早就引起了很多不满,一度成为人们上云的最大障碍。这些都是公有云里的大牌,市场地位显赫,技术过硬,也是不差钱的金主,但仍逃不过故障的魔掌,其它的公有云就更不用提了,只是市场份额不大,出了故障也不像这几个更受人们关注罢了。这...

    jayce 评论0 收藏0
  • 断开TCP连接

    摘要:我们知道通过三次握手建立可靠连接,通过四次挥手断开连接,连接是比较昂贵的资源。从上分析,安全可靠的断开连接至少需要四次,再多一次的意义不大。连接的异常断开以上都是在理想的情况下发生的,理想状态下,一个连接可以被长期保持。 我们知道TCP通过三次握手建立可靠连接,通过四次挥手断开连接,TCP连接是比较昂贵的资源。为什么TCP需要通过三次握手才能建立可靠的连接?两次不行么?断开连接为什么需...

    fyber 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<