javascript检测是否联网的实现代码


Posted in Javascript onSeptember 28, 2014

最简单粗暴的方式就是加载网络资源,JS文件或者图片文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

typeof window.jQuery === "undefined" // return false or ture

用jQuery变量来检测是否联网

function doConnectFunction() {
  return true;
}
function doNotConnectFunction() {
  return false;
}

 var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
i.src = 'http://su.bdimg.com/static/superplus/img/logo_white.png?d=' + escape(Date());

加载网络资源的问题就是检测的互联网,如果是局域网检测是无能为力了。
这时候需要一个更好的解决方案,就要用到navigator.onLine,这个属性比较坑的就是浏览器兼容,chrome、Safari 都完美支持,IE7以上是支持的。火狐和IE6比较坑,只有在浏览器“脱机状态”下才返回false,其他都返回true。掐了网线都是true,Opera直接不支持了。

所以还得加一个兼容方法:给location.hostname地址发一个http头请求,代码如下:

var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
 try {
  xhr.send();
  return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
 } catch (error) {
  return false;
 }

里面一个要注意的就是open方法的第三个参数要传false,必须是同步请求。

总结:支持navigator.onLine的浏览器就用navigator.onLine,不支持的就发一个http头请求。

原创文章,转载请注明: 转载自前端开发

Javascript 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
详解vue-router基本使用
Apr 18 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
详解vue组件之间的通信
Aug 30 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 #Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 #Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 #Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 #Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 #Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 #Javascript
You might like
PHP语法速查表
2006/12/06 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python中关于使用模块的基础知识
2015/05/24 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
python 高阶函数简单介绍
2021/02/19 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
小区门卫工作职责
2013/12/14 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2015年超市工作总结
2015/04/09 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python