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 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
javascript基础知识讲解
2017/01/11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python中subprocess模块用法实例详解
2015/05/20 Python
python中的tcp示例详解
2018/12/09 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
总结Python使用过程中的bug
2021/06/18 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis