使用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 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
js实现二级导航功能
Mar 03 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
javascript如何实现create方法
Nov 04 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
如何安装并使用conda指令管理python环境
2019/07/10 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
家长评语大全
2014/01/22 职场文书
校庆接待方案
2014/03/18 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
小学班主任评语
2014/12/29 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Python制作表白爱心合集
2022/01/22 Python