使用JS在浏览器中判断当前网络连接状态的几种方法


Posted in Javascript onMay 05, 2017

使用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{
 ...
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
input按钮的事件处理大全
Dec 10 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
js实现倒计时关键代码
May 05 #Javascript
javascript 中的继承实例详解
May 05 #Javascript
JavaScript函数表达式详解及实例
May 05 #Javascript
Node.js中的http请求客户端示例(request client)
May 04 #Javascript
Bootstrap布局之栅格系统学习笔记
May 04 #Javascript
vue.js开发环境搭建教程
May 04 #Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
You might like
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP的5个安全措施小结
2012/07/17 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
vuex实现简易计数器
2016/10/27 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
python中的lambda表达式用法详解
2016/06/22 Python
python找出完数的方法
2018/11/12 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
c++工程师面试问题
2013/08/04 面试题
活动策划邀请函
2014/02/06 职场文书
通信工程专业求职信
2014/06/04 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
学生打架检讨书
2014/10/20 职场文书
西游记读书笔记
2015/06/25 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android