方法 一

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. C#设计模式--命令模式(学习Learning hard C#设计模式笔记)

    原文地址http://www.cnblogs.com/zhili/p/CommandPattern.html class Program { static void Main(string[] arg ...

  2. CefSharp F12打开DevTools查看console

    winform嵌入chrome浏览器,修改项目属性 生成 平台为x86 1.nuget安装cefsharp 2.实例化浏览器 private void Form1_Load(object sender ...

  3. php Closure::bind的参数说明

    publicstatic Closure Closure::bind ( Closure $closure , object$newthis [, mixed$newscope = 'static' ...

  4. Vmware搭建LNMP环境(Centos7+Nginx+Mysql+PHP7.1.8)

    参考:1.Linux学习之CentOS(一)----在VMware虚拟机中安装CentOS 7(图文教程) 2.Centos7搭建LNMP环境 3.MySQL5.7修改默认root密码 4.CentO ...

  5. Android上实现视频录制

    首先,我们肯定要用到摄像头,因此需要在Manifest文件中声明使用权限: <uses-permission android:name="android.permission.CAME ...

  6. Android使用xml文件中的array资源

    Android中有种使用数组的非常简单的用法,在xml文件中获取. 创建数组资源 在value目录下创建arrays.xml文件 然后在arrays.xml文件中使用<string-array& ...

  7. java基础(八) 深入解析常量池与装拆箱机制

    引言   本文将介绍常量池 与 装箱拆箱机制,之所以将两者合在一起介绍,是因为网上不少文章在谈到常量池时,将包装类的缓存机制,java常量池,不加区别地混在一起讨论,更有甚者完全将这两者视为一个整体, ...

  8. node和iisnode express手工安装

    一.安装node.js的x86版本: 这样,node.js会安装在C:\Program Files (x86)\nodejs,这符合iisnode express7版本的期待. 二.安装iisnode ...

  9. 跳过ssh在首次连接出现检查keys 的提示

    1.将需要登陆主机得公钥添加到known_hosts ssh-keyscan 192.168.77.129 192.168.77.130 >> /root/.ssh/known_hosts ...

  10. 浅谈Java——泛型DAO

    首先解释一下为什么要学习泛型DAO.平时在写DAO的时候是一个接口对应一个实现类,实现类里面要写很多的操作数据库的方法.当我们有很多的javaben的时候我们会写很多的接口和实现类,并且里面的代码都是 ...