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 replace 字符替换实现代码
Dec 02 Javascript
javascript面向对象编程代码
Dec 19 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
基于react框架使用的一些细节要点的思考
May 31 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python使用mysql数据库示例代码
2017/05/21 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
什么是Python变量作用域
2020/06/03 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
异常和异常类的概念
2014/09/12 面试题
网上卖盒饭创业计划书
2014/01/26 职场文书
汇源肾宝广告词
2014/03/20 职场文书
小学社会实践活动总结
2014/07/03 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
2014小学年度工作总结
2014/12/20 职场文书
公务员考察材料
2014/12/23 职场文书
员工工作能力评语
2014/12/31 职场文书
应聘教师自荐信
2015/03/26 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
python使用pymysql模块操作MySQL
2021/06/16 Python