方法 一

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. 14、通过jpa往数据库插数据

    这是接着上一篇写的,在上一篇的基础上添加 Controller @RestController public class HelloController { @Resource private Hel ...

  2. Docker(二):微服务教程

    Docker 是一个容器工具,提供虚拟环境.很多人认为,它改变了我们对软件的认识. 站在 Docker 的角度,软件就是容器的组合:业务逻辑容器.数据库容器.储存容器.队列容器......,Docke ...

  3. 关于HSQLDB访问已有数据库文件的操作说明

    关于HSQLDB数据库的创建,本文不做过多描述,可以在百度上搜索一下,有许多. 对于访问已存在的库文件,网上找了半天,没有整理的很清楚的参考资料,现将自己的操作过程整理如下,以供参考. 1.先下载一个 ...

  4. 容易忽略的小知识之 Date 函数参数

    Date 对象启用基本存储器并取得日期和时间. dateObj = new Date()dateObj = new Date(dateVal)dateObj = new Date(year, mont ...

  5. strConnection连接Access数据库

    string strConnection = "Provider=Microsoft.ACE.OLEDB.12.0;";            strConnection += @ ...

  6. redis 适用场景、缓存选择、java实现

    redis适用场景 查询多,修改少:如国家地区信息.商品分类.数据字典 缓存选择 hibernate二级缓存.mybatis二级缓存.redishibernate二级缓存.mybatis二级缓存默认不 ...

  7. Week3——书上的分析

    1.long before=System.currentTimeMills();      long after=System.currentTimeMills(); 该l两句是分别记录了开始过滤和结 ...

  8. WWF3.5SP1 参考源码索引

    http://www.projky.com/dotnet/WF3.5SP1/System/Runtime/Serialization/FormatterServicesNoSerializableCh ...

  9. ExpressRoute 线路预配工作流和线路状态

    本页从较高层面引导你完成服务预配和路由配置工作流. 下图和相应的步骤说明了预配端到端 ExpressRoute 线路所要执行的任务. 使用 PowerShell 配置 ExpressRoute 线路. ...

  10. Oracle EBS 新增OAFM个数

    在 $INST_TOP/ora/10.1.3/opmn/conf/opmn.xml中找到<process-type id="oafm" module-id="OC4 ...