方法 一

navigator.onLine  

这个html5的 navigator的新特性可以很简单帮我们搞定
HTML5为此定义了一个navigator.onLine属性,这个属性值为true表示设备能上网,值为false表示设备离线。
当然不同的浏览器,对这个的支持还不太一样
IE6+和Safari 5+支持的比较好
Firefox 3+和支持navigator.onLine属性,但你必须手工选中菜单项“文件-Web开发人员(设置)-脱机工作”才能让浏览器正常的工作。
Chrome需要12以上。
if (navigator.onLine)
{ //正常工作}
else { //执行离线状态时的任务}
方法 二

online和offline。

当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。这两个事件在window对象上触发。(必须要手工轮询这个属性才能检测到网络状态的变化。 )

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(window, "online", function () {
alert("Online");
});
EventUtil.addHandler(window, "offline", function () {
alert("Offline");
});
方法 三

Offline.js 插件(https://github.com/hubspot/offline)

  

原文地址:https://www.jianshu.com/p/b1379ab332aa

  

js检测是够断网的更多相关文章

  1. JS 检测客户端断网情况

    常用方法 1 navigator.onLine 2 window.addEventListener() 3 获取网络资源 4 ajax请求 1. navigator.onLine 只会在机器未连上路由 ...

  2. h5 网络断网时,返回上一个页面 demo (与检测网络代码相结合,更直观看到结果)

    页面一: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  3. 心跳机制tcp keepalive的讨论、应用及“断网”、"断电"检测的C代码实现(Windows环境下)

    版权声明:本文为博主原创文章,转载时请务必注明本文地址, 禁止用于任何商业用途, 否则会用法律维权. https://blog.csdn.net/stpeace/article/details/441 ...

  4. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  5. Delphi之TClientSocket和TServerSocket使用tcp keepalive心跳机制实现“断网”、"断电"检测

    开发环境:Delphi7 测试环境:WinXP,Win7  32bit,Win7 64bit 使用TClientSocket和TServerSocket实现TCP长连接通讯,经常因为断电断网等原因导致 ...

  6. 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)

    现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...

  7. websocket断网消息补发

    注册irealtime 首先去irealtime网站注册一个账号,然后创建一个应用,注册过程请参考获取开发者账号和 appkey 创建页面 <!DOCTYPE html> <html ...

  8. Python 实现断网自动重连

    为了实现 断网了,自动连接网络原理:每隔一段时间ping一下百度,判断网络状态,没有联网的话,就模仿浏览器发一条Post给服务器import urllibimport hashlibimport su ...

  9. 用图像识别玩Chrome断网小游戏

    先来看一下效果 正文 最近在学习机器学习方面的知识,想着做个东西玩玩,然后就接触到了TensorFlow这个机器学习框架,这个框架封装了机器学习的一些常用算法. 不过要自己实现一套流程还是比较麻烦,我 ...

随机推荐

  1. PHPCMS v9上传图片提示"undefined"的解决办法

    把phpcms\modules\attachment\attachments.php中将 if(empty($this->userid)){改成 if(empty($_POST['userid' ...

  2. Https之SSL原理

    一.HTTPS和SSL HTTP(Hyper TEXT Transfer Protocol超文本传输协议)是目前互联网上应用最为广泛的一种网络协议,用于在Web浏览器和网站服务器之间传递信息,但是HT ...

  3. ios上-webkit-overflow-scrolling与position的bug

    如上图,.fb-box是一个大div,包含着页面上的所有元素,包括所看到的那个弹窗.dialog-img,并且设置了height:100%;-webkit-overflow-scrolling:tou ...

  4. 网络I/O模型--02阻塞模式(多线程)

    当服务器收到客户端 X 的请求后(读取到所有请求数据后),将这个请求送入一个独立线程进行处理,然后主线程继续接收客户端 Y 的请求. 客户端一侧也可以使用一个子线程和服务器端进行通信.这样客户端主线程 ...

  5. ArcEngine9.3迁移至ArcObject10.1

    以前写的程序,现在看起来真是相当的青涩,当时写的东西是显得多么地无知啊,很多应该写成一个类,有些需要优化,需要多线程,代码需要加密--总一种想修改的冲动.但这也需要时间和精力.下面准备将原来的程序进行 ...

  6. 谷歌新Logo如何做到只有305字节

    谷歌新旧Logo 谷歌换logo已经有一段时间了,对于更换Logo的问题,大家讨论的最多的是到底新老Logo哪个更好看. 但也有个别同学注意到了一个事实:谷歌的新Logo只有305字节那么大,而老的L ...

  7. PHP isset()与empty()的使用区别

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...

  8. ios虚拟机安装(一)

    安装软件:vmwarestation-v9.0.1()   MAC OS X Mountain Lion 10.8.2 xcode 4.6.2 一定要安装补丁:unlock-all-v110(mac系 ...

  9. oracle sql 命令类别

    1.数据定义语言 DDL 有 create alter drop2.数据操纵语言 DML insert select delete update3.事务控制语言 TCL commit savepoin ...

  10. Object、T(以下代指泛型)、?的区别

    因为最近看了很多项目底层都使用了T,?泛型,于是百度了一下有如下理解 我们先来试着理解一下Object类,学习Java的应该都知道Object是所有类的父类,注意:那么这就意味着它的范围非常广!首先记 ...