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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用JS判断用户是否上网(连接网络)

    如下所示: 复制代码 代码如下: <HTML xmlns:CAP><HEAD><TITLE>JS检测用户是否上网</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=gb2312"><style> @media all {CAP\\:clientCaps {behavior:url(#default#clientca

  • js检测网络是否具体连接功能的代码

    复制代码 代码如下: var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { el

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

    使用JS在浏览器中判断当前网络状态的几种方法如下: 1. navigator.onLine 2. ajax请求 3. 获取网络资源 4. bind() 1. navigator.onLine 通过navigator.onLine判断当前网络状态: if(navigator.onLine){ ... }else{ ... } 非常简单,但是并不准确-根据MDN的描述: navigator.onLine只会在机器未连接到局域网或路由器时返回false,其他情况下均返回true. 也就是说,机器连接上

  • Android判断设备网络连接状态及判断连接方式的方法

    本文实例讲述了Android判断设备网络连接状态及判断连接方式的方法.分享给大家供大家参考,具体如下: 在Android开发过程中,对于一个需要连接网络的Android设备,对设备的网络状态检测是很有必要的!有很多的App都需要连接网络.判断设备是否已经连接网络,并且在连接网络的状态下判断是wifi无线连接还是GPRS手机网络连接,这样就可以在不同的网络连接下去调用不同的方法,处理不同的事情.这些功能都写在了下面的代码中了!请看主要代码如下: /** * 检测网络是否连接 * @return *

  • Shell中判断字符串是否为数字的6种方法分享

    本篇文章主要介绍了"shell 判断字符串是否为数字",主要涉及到shell 判断字符串是否为数字方面的内容,对于shell 判断字符串是否为数字感兴趣的同学可以参考一下. #!/bin/bash ## 方法1 a=1234;echo "$a"|[ -n "`sed -n '/^[0-9][0-9]*$/p'`" ] && echo string a is numbers 第一个-n是shell的测试标志,对后面的串"`

  • 用Vue.js在浏览器中实现裁剪图像功能

    你是否写了一个需要接受用户上传图片的 Web 应用,后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题?在网络上处理图像很容易成为一种痛苦 -- 当然,除非你使用了正确的工具. 在本教程中,我们将探讨如何在浏览器中使用 JavaScript 库来操作图片,为服务器上的存储做准备,并在 Web 程序中使用.我们将使用 Vue.js 而不是原生 JavaScript来完成此操作. 要了本文想要完成的任务,请查看上面的图片.左侧是原始图像,右侧是新图像预览.我们可以移动裁剪框并调整其大小,

  • 在js与java中判断json数据中是否含有某字段的案例

    js中 从服务端传过来一个json数据为data 1.data["key"] != undefined //这种有缺陷,如果这个key定义了,并且就是很2的赋值为undefined,那么这句就会出问题了 2.!("data" in obj) 3.data.hasOwnProperty("key") //后面两种推荐使用 java程序中判断是否存在 data 为从浏览器传回来的json数据 当读取数据的时候最好先加一个判断,不然如果里面不含有该数据

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • JS在浏览器中解析Base64编码图像

    JS在浏览器中解析Base64编码图像

    上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝.下载而不用担心信息会缺失.这项技术也在email邮件中被广泛使用. 浏览器对Base64的支持 图像是最经常被使用的一种二进制文件.而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持.因此图形信息可以以下面的形式呈现在页面中. Java代码 <img src="data:im

  • js在浏览器中的event loop事件队列示例详解

    js在浏览器中的event loop事件队列示例详解

    目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是

  • C#中判断本地系统的网络连接状态的方法

    C#中判断本地系统的网络连接状态的方法

    函数InternetGetConnectedState返回本地系统的网络连接状态. 语法: BOOL InternetGetConnectedState( __out LPDWORD lpdwFlags, __in DWORD dwReserved ); 参数: lpdwFlags[out] 指向一个变量,该变量接收连接描述内容.该参数在函数返回FLASE时仍可以返回一个有效的标记.该参数可以为下列值的一个或多个. 值 含义 INTERNET_CONNECTION_CONFIGURED0x40

  • 详解IOS判断当前网络状态的三种方法

    在项目中,为了好的用户体验,有些场景必须线判断网络状态,然后才能决定该干嘛.比如视频播放,需要线判断是Wifi还是4G,Wifi直接播放,4G先提示用户.获取网络状态的方法大概有三种: 1. Reachability 这是苹果的官方演示demo中使用到的方法,我们可以到苹果官方文档里下载Demo(点击左上角Download Sample Code 即可下载),然后把Demo里的Reachability.h和.m考到自己项目中,并在Build Phases 的 Link Binary 添加Syst

随机推荐