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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 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
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
理解javascript正则表达式
2016/03/08 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
行政专员的岗位职责
2014/03/10 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
建设工地安全标语
2014/06/07 职场文书
租车协议书
2015/01/27 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
入党介绍人意见2015
2015/06/01 职场文书
高温慰问简报
2015/07/21 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏