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 相关文章推荐
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python做接口测试的必要性
2019/11/20 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
预备党员表决心书
2014/03/11 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书