使用JS在浏览器中判断当前网络连接状态的几种方法
更新时间：2017年05月05日 09:09:26 作者：缪运泽
本篇文章主要介绍了使用JS在浏览器中判断当前网络状态的几种方法，非常具有实用价值，需要的朋友可以参考下
使用JS在浏览器中判断当前网络状态的几种方法如下：
1. navigator.onLine
2. ajax请求
3. 获取网络资源
4. bind()
1. navigator.onLine
通过navigator.onLine判断当前网络状态：
if(navigator.onLine){
...
}else{
...
}
非常简单，但是并不准确-根据MDN的描述：
navigator.onLine只会在机器未连接到局域网或路由器时返回false，其他情况下均返回true。
也就是说，机器连接上路由器后，即使这个路由器没联通网络，navigator.onLine仍然返回true。
2. ajax请求
采用get请求的方式，根据返回值判断是否能够成功get到数据，从而确定当前的网络状态：
$.ajax({
url: 'x.html',
success: function(result){
...
},
error: function(result){
...
}
});
3. 获取网络资源
原理同2，在页面放一张隐藏图片，设置其onerror函数(获取图片资源失败时会调用该函数)：
<script src="./jquery-3.1.1.min.js"></script>
<script>
function getImgError(){
alert("Network disconnect!");
}
$().ready(function(){
$("#btn-test").click(function(){
var imgPath = "https://www.baidu.com/img/bd_logo1.png";
var timeStamp = Date.parse(new Date());
$("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
});
});
</script>
<body>
<img id="img-test" style="display:none;" onerror="getImgError()"/>
<button id="btn-test">check status</button>
</body>
每次点击button时，更新该图片的src。若获取图片失败，则认为网络连接失败
这种判断网络状态的准确完全取决于图片资源是否稳定。。。
4. bind()
原理同1：
var netStatue = true;
$(window).bind('online', function(){
netStatue = true;
});
$(window).bind('offline', function(){
netStatue = false;
});
...
if(netStatue){
...
}else{
...
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇JS给Array添加是否包含字符串的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。本文就来利用Canvas实现满屏爱心和文字动画的制作，感兴趣的可以了解一下2022-11-11
可能很多人看到这个题目就会想到LABjs、RequireJS、SeaJS... 这些库，但无奈小编没用过这些库，什么 AMD 、CMD 哪来那么多术语... 前端的库太多了，要看各种乱七八糟的文档，好难啊，还不如自己写一个库呢。于是就有了这文章，有需要的朋友们下面来一起学习学习吧。2016-11-11
这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法，包括正则法、split拆分法等，需要的朋友可以参考下2016-04-04
使用CoffeeScrip优美方式编写javascript代码
CoffeeScript就是JavaScript，他进行的是一对一的编译，或者说是翻译，而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码，感兴趣的朋友一起看看吧2015-10-10
IE6下javasc#ipt:void(0) 无效的解决方法
本篇文章主要是对IE6下javasc#ipt:void(0) 无效的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了微信小程序引入模块中wxml、wxss、js的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家介绍了uniapp路由uni-simple-router使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家详细介绍了JS canvas实现画板和签字板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
最新评论