1. navigator.onLine

通过navigator.onLine判断当前网络状态：

1
2
3
4
5
 
if(navigator.onLine){
  ...
}else{
  ...
}

非常简单，但是并不准确-根据MDN的描述：
navigator.onLine只会在机器未连接到局域网或路由器时返回false，其他情况下均返回true。
也就是说，机器连接上路由器后，即使这个路由器没联通网络，navigator.onLine仍然返回true。

2. ajax请求

采用get请求的方式，根据返回值判断是否能够成功get到数据，从而确定当前的网络状态：

1
2
3
4
5
6
7
8
9
 
$.ajax({
  url: 'x.html',
  success: function(result){
    ...
  }, 
  error: function(result){
    ...
  }
});

3. 获取网络资源

原理同2，在页面放一张隐藏图片，设置其onerror函数(获取图片资源失败时会调用该函数)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<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。若获取图片失败，则认为网络连接失败。

PS: 三种方法都不是很理想，但暂时尚未找到更好的解决方案。

使用JS在客户端判断当前网络状态的更多相关文章

  1. iOS 判断当前网络状态的三种方法

    http://www.cocoachina.com/ios/20171103/21039.html 在项目中,为了好的用户体验,有些场景必须线判断网络状态,然后才能决定改干嘛.比如视频播放,需要线判断 ...

  2. 使用InternetGetConnectedState判断本地网络状态（C#举例）

    函数原型:函数InternetGetConnectedState返回本地系统的网络连接状态. 语法: BOOL InternetGetConnectedState( __out LPDWORD lpd ...

  3. android判断当前网络状态及跳转到设置界面

    今天,想做这个跳转到网络设置界面, 刚开始用 intent = new Intent(Settings.ACTION_WIRELESS_SETTINGS); 不料老是出现settings.Wirele ...

  4. Android之判断当前网络状态

    /** * 检测网络是否可用 * @return */ public boolean isNetworkConnected() { ConnectivityManager cm = (Connecti ...

  5. Android杂谈--网络状态判断

    许多联网应用都在开始运行的时候检查当前网络状态,如果没有开启则去开启它,记录一下以前写程序时的网络检查,发现人的记忆力真是有限,总是隔段时间久忘记,所以记录下来是最好的记忆. 我们可以在一开始启动程序 ...

  6. Android中判断当前网络是否可用

    转载原文地址:http://www.cnblogs.com/renqingping/archive/2012/10/18/Net.html 当前有可用网络,如下图: 当前没有可用网络,如下图: 实现步 ...

  7. 如何消除原生Android网络状态上的惊叹号

    喜欢使用原生Android系统的朋友可能会发现自己的状态栏信号图标上经常有一个惊叹号标志. 这是怎么回事呢?原因是Android为了对网络状态进行检测,采用了一种叫做captive detection ...

  8. Linux shell脚本判断服务器网络是否可以上网

    Linux shell脚本判断网络畅通 介绍 在编写shell脚本时,有的功能需要确保服务器网络是可以上网才可以往下执行,那么此时就需要有个函数来判断服务器网络状态 我们可以通过curl来访问 www ...

  9. iOS中利用CoreTelephony获取用户当前网络状态(判断2G,3G,4G)

    前言: 在项目开发当中,往往需要利用网络.而用户的网络环境也需要我们开发者去注意,根据不同的网络状态作相应的优化,以提升用户体验. 但通常我们只会判断用户是在WIFI还是移动数据,而实际上,移动数据也 ...

随机推荐

  1. 详细介绍Linux finger命令的使用

    Linux 允许多个用户使用不同的终端同时登陆,Linux finger命令为系统管理员提供知道某个时候到底有多少用户在使用这台Linux主机的方法,对于这个简单的命令我们还是先介绍一下再举例吧. L ...

  2. mysql root 密码恢复

    1.停止mysql服务 service mysql stop 2.启动mysql时不启动授权表,跳过权限验证使用空密码登陆 mysqld_safe --skip-grant-tables & ...

  3. POJ 3087 Shuffle'm Up (模拟+map)

    题目链接:http://poj.org/problem?id=3087 题目大意:已知两堆牌s1和s2的初始状态, 其牌数均为c,按给定规则能将他们相互交叉组合成一堆牌s12,再将s12的最底下的c块 ...

  4. Linux下突然不识别无线网卡

    昨天还能用wifi的Linux,今天进去后发现没有了wifi的图标,ifconfig也不显示无线网卡.怎么办? 出现这种情况,肯定是上次关机之前做了一些操作导致的.我遇到过的一个情况是:Fedora2 ...

  5. 使用afl-dyninst fuzz无源码的二进制程序

    转:http://ele7enxxh.com/Use-AFL-dyninst-To-Fuzz-Blackbox-Binaries.html 使用afl-dyninst fuzz无源码的二进制程序 通常 ...

  6. 牛客练习赛9 B - 珂朵莉的值域连续段

    题目描述 珂朵莉给你一个有根树,求有多少个子树满足其内部节点编号在值域上连续 一些数在值域上连续的意思即其在值域上构成一个连续的区间 输入描述: 第一行有一个整数n,表示树的节点数.接下来n–1行,每 ...

  7. java变量的命名使用规则

    1.环境变量通常是指在操作系统中,用来指定操作系统运行时需要的一些参数 2.变量名以字母.下划线或者美元符(4上面的￥)开头,不能以数字开头,后面跟字母.下划线.美元符.数字,变量名对大小写敏感,无长 ...

  8. Django+Nginx+uwsgi搭建自己的博客（二）

    在上一篇博客中,为大家介绍了Django的一些基本概念以及建立了第一个App——Users,并且在数据库中建立了对应的表. 在这篇博客中,将为大家继续介绍数据库模型的定义和相关操作,以及Users A ...

  9. linux——(5)文件与文件系统的压缩与打包

    概念一:常见的压缩文件拓展名 .z compress程序压缩的文件. .gz gzip程序压缩的文件. .bz2 bzip2程序压缩的文件. .tar tar程序打包的数据,并没有压缩过. .tar. ...

  10. Selenium快速入门（上）

    浏览器驱动下载 Edge浏览器 Firefox浏览器 Safari浏览器 Chrome浏览器 PhantomJS浏览器 下载完成之后,添加到环境变量. 声明浏览器对象 selenium支持的浏览器版本 ...