js 判断是否网络断了

最新推荐文章于 2024-08-09 18:52:21 发布
最新推荐文章于 2024-08-09 18:52:21 发布
阅读量2.1k 收藏 2
点赞数
文章标签： javascript 前端 php ViewUI
原文链接：https://segmentfault.com/a/1190000002558481
版权

GitHub issues GitHub forks GitHub stars GitHub license

最佳方法：

结合下面的方法混合使用

在IE和Firefox上使用Ajax轮询检查网络是否断了，其他浏览器上使用 online 和offline事件 侦听网络。

下载地址：onlinenetwork for github

引用

html<head>
    <script type="text/javascript" src="online.js"></script>
</head>

设置轮询时间和地址

time： 时间不设置默认2000
url：不设置默认所有浏览器用 online 和 offline事件

jsvar net = onlinenetwork({
    "time":1000,
    "url":"http://*******.com/ping.php"
})

连上网络执行

jsnet.onLineHandler(function(){
    console.log("连上了！")
})

断开网络执行

jsnet.offLineHandler(function(){
    console.log("断开网络！")
})

一般判断方法:

方法一：利用online和offline事件

此方法是通过 online 和 offline 事件来侦听是否断网，但是这个在 IE 和 Firefox 中，并非断网了就是真的断网了。（如火狐中在选择 菜单>>文件>>脱机工作才会触发 online 和 offline 事件）

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

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 通过 img 的 onerror 事件判断是否断网
此方法弱点就是耗流量（一像素的空gif 轮询一次 1.43KB ）手机上用那就蛋疼了(这个样子就会偷偷跑流量...)。

jssetInterval(function(){
    var $img = $('<img src="http://jslite.io/blank.gif?'+(new Date())+'">')
    $img.appendTo('body').css("display","none").load(function(){
        console.log("连接成功！")
        $(this).remove()
    }).error(function(){
        console.log("断网了！")
        $(this).remove()
    })
},2000)
weixin_34284188
关注
【八股】计算机网络篇
qq_44768318的博客
04-22 1603
👉由于 TCP 传输协议是面向字节流的传输协议，没有消息保护边界，所以发送方发送的多个数据包，接收方应用层不知如何区分，可能会被当成一个包来处理，这就是粘包；或者，发送方将一个打包分成多个小包发送，而接收方将它们当成多个包进行处理，这就是拆包。👉解决方法：将首尾字符用特殊字符分隔 | 使用变长协议，在报文头中指定当前报文中数据的长度。(如HTTP协议)服务器第一次收到客户端的 SYN 之后，就会处于。
ping.js插件
07-12
jquery插件ping.js，检测网站的响应速度
javascript中判断网络连接状态
weixin_43750162的博客
08-16 808
判断网络连接的状态一般使用h5中的navigator方法 <script type="text/javascript"> alert(window.navigator.onLine);//true,用于检测联络的链接，返回的时布尔类型 </script> 使用online和offline监听浏览器的联网状态 <script type="text/javas...
前端检测当前的网络状况的方法
最新发布
Chloeeeeeeee的博客
08-09 568
前端可以通过一些方法来检测当前的网络状况：1. 使用 navigator.onLine 属性；2. 定期发送请求；3. 使用 Service Worker；4. 使用 Network Information API
JQ判断是否与服务器断开连接
u011424470的专栏
10-16 1110
var boolean = true; $.ajax({  url: 'http://192.168.246.100:8080/SkyMonWeb/images/12.png',//项目下的某张图片  type: 'GET',  complete: function(response) {   if(response.status == 200) {   boolean = tru
JavaScript中 判断网络状态的几种方法
明天也要努力的博客
10-22 5007
为了判断是否离线，在页面加载后，可先通过 navigator.onLine 取得初始的状态，然后通过ononline、onoffline 事件来确定网络连接状态是否变化。一个缺点：navigator.onLine 和 online、offline事件却不是万能的，只能判断无线和网线是否连接，而不能进一步判断该网络是否能够上网。
HTML5中对于网络是否断开的检测.很有意思哦
QDY5945的博客
11-12 417
1 //事件的封装 2 var EventUtil = { 3 addHandler: function (element, type, handler) {//注册事件 4 ...
JS判断电脑是否连接网络
09-09
JS判断电脑是否连接网络,如果电脑没有连接网络提示 掉线，相反提示 “上网”
计算机网络之Websocket
RenLJ1895的博客
01-11 562
WebSocket 网络的层级：由下往上分为 物理层、数据链路层、网络层、传输层、会话层、表示层和应用层. TCP和UDP TCP：是面向连接的一种传输控制协议。属于传输层协议。TCP连接之后，客户端和服务器可以互相发送和接收消息，在客户端或者服务器没有主动断开之前，连接一直存在属于长连接。 优点：安全、传输数据无大小限制、准确可靠，先发先至 缺点：效率低，不能做离线任务、连接有耗时 UDP：是面向非连接的用户数据报协议。属于传输层协议。所谓的无连接就是在传输数据之前不需要交换信息，没有握手建立连接的过
Python网络爬虫之数美滑块的加密及轨迹之动态js参数分析
xff123456_的博客
04-29 1460
数美滑块的加密及轨迹等应该是入门级别的吧，用他们的教程和话来说 就一个des 然后识别缺口位置可以用cv2或者ddddoc 轨迹 也可以随便模拟一个，这些简单的教程 在csdn已经有一大把可以搜到的，但是却很少人告诉你，它的js好像是一周更新一次，更 新之后post的参数key和des的key会变，混淆的js结构也会变，现在我准备说的就是分析动态的参数和des加密的key值。 滑块预览图如下图所示： 抓包 进入正题 首先看这个接口 /ca/v1/conf 返回域名和js地址 包含版本号 { code:
Node-RED＞六.IOT2050 S7通讯及故障判断
m0_67747776的博客
11-16 394
需要注意上图中Mode 的“Emit only when value changes (diff)”选项勾选后数据会变为“变化采集”，所有数据都不发生变化时无法形成信息流会输出为空，因此建议不勾选该选项，使用“定期采集”模式。下表给出了 S7 PLC 中数据寻址方式及 Node-red 对应寻址方式。说明:1)n 为数据区域偏移量2)x 为数据字节偏移量3)y 为数据位偏移量4)确保 “STRING” 或 “S” 的数据字节偏移量非 0，length 替换为字符串长度。
react-跟踪网络状态的Reacthook
08-15
跟踪网络状态的 React hook
js 监听网络断开(网络异常)和连接成功
PrimaryColor
11-09 1659
代码： window.addEventListener("online",function(){ alert("网络连接了") }) window.addEventListener("offline",function(){ alert('网络断开了') }) 首次进入不会触发网络连接成功，只有断开后，再重连才会触发。 ...
JS 监听网络状态
一只路过的小码农
01-09 2784
我们在开发过程中会遇到监听用户网络状态的需求，通过。除了以上监听事件外，还可以轮训监听，1秒获取一次。可以获取当前的网络状态，包括。
js判断当前网络连接
热门推荐
wuyou1336的博客
10-14 1万+
想要查看你是否连接上了互联网, 判断 window.navigator.onLine 的值是否为true: if(window.navigator.onLine==true){ alert（"已连接"）； }else{ alert（"未连接"）； } 想要监听浏览器的联网状态, 使用window.onOnline和window.onOffline事件: window.addEvent
JS 检测是否联网
White feathe 的博客
06-20 8038
JS 检测是否联网解决方案1： //检测是否联网，支持离线检测的浏览器有IE6+(只支持navigator.onLine属性)、Firefox3、Safari4、Opera 10.6、Chrome、iOS 3.2版Safari和Android版WebKit。 if (navigator.onLine) { console.l
js监听判断设备是否有网络（断网恢复事件监听）
刻痕
12-06 4677
判断是否有网： navigator.onLine：false断网，true有网 监听用户是否开关网络： window.addEventListener("online", function () { console.log("网络连接已恢复!"); }); window.addEventListener("offline", function () { console.log("网络连接已断开!"); }); ...
js判断网络状态
haha57的博客
09-04 555
window.navigator.onLine 的值为true是连接，否则为断开网络。 if (window.navigator.onLine == true) { //网络链接正常 } else { //网络连接失败 };
js判断用户网络状态
09-04
JS判断用户网络状态可以通过使用Navigator对象的属性和事件进行判断。 1. 使用navigator.onLine属性：这个属性返回一个布尔值，表示浏览器是否处于在线状态。如果返回true，则表示浏览器处于在线状态，反之则表示浏览器处于离线状态。 示例代码： ```javascript if (navigator.onLine) { console.log("用户处于在线状态"); } else { console.log("用户处于离线状态"); } ``` 2. 监听online和offline事件：当浏览器的在线状态发生改变时，会触发相应的事件。我们可以通过监听这两个事件来判断用户的网络状态。 示例代码： ```javascript window.addEventListener('online', function() { console.log("用户从离线状态切换到在线状态"); }); window.addEventListener('offline', function() { console.log("用户从在线状态切换到离线状态"); }); ``` 需要注意的是，虽然这两种方法可以判断用户的网络状态，但并不能判断用户的实际网络速度。如果需要判断用户的网络速度，可以使用一些第三方库或API，如Speedtest.net的API或者测速工具等。这些方法可以通过测量用户的网络延迟和带宽来判断用户的网络速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值