如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术，所以用 JavaScript 检测浏览器在线/离线状态非常常见。

　　无论浏览器是否在线，navigator.onLine 属性都会提供一个布尔值。 如果浏览器在线，则设置为 true ，否则设置为 false 。

    if(navigator.onLine) { // true|false

        // ...

    }

online 和 offline 事件：

　　当浏览器脱机或上线时，浏览器还支持 online 和 offline 事件。

window.addEventListener('online', function(e){console.log('online')});

window.addEventListener('offline', function(e){console.log('offline');});

　　你可以使用几种熟悉的方式来注册事件：

  • 在 window，document，或 document.body 上使用 addEventListener
  • 将 document 或 document.body 的 ononline 或 onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
  • 在 HTML 标记中的 body 标签上指定 ononline=”…” 或 onoffline=”…” 特性。

　　注意事项：

  • IE8中需要给document.body绑定事件而不是window
  • 在线离线的变化指的是物理上的网络链接变化，如果是在控制台将网络限制为 offline 则不会触发相应的事件。

实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）</title>

    <style type="text/css">

        #status {

            position: fixed;

            width: %;

            font: bold 1em sans-serif;

            color: #FFF;

            padding: .5em;

        }

        #log {

            padding: .5em .5em .5em;

            font: 1em sans-serif;

        }

        .online {

            background: green;

        }

        .offline {

            background: red;

        }

    </style>

</head>

<body>

<div id="status"></div>

<div id="log"></div>

<button type="button" id="test">检查状态</button>

<script>

window.addEventListener('load', function () {

    var testBtn = document.getElementById("test");

    var status = document.getElementById("status");

    var log = document.getElementById("log");

    function updateOnlineStatus(event) {

        var condition = navigator.onLine ? "online" : "offline";

        status.className = condition;

        status.innerHTML = condition.toUpperCase();

        log.insertAdjacentHTML("beforeend", "Event: " + (event?event.type:"-") + "; Status: " + condition+ " | ");

    }

    window.addEventListener('online', updateOnlineStatus);

    window.addEventListener('offline', updateOnlineStatus);

    testBtn.addEventListener("click", updateOnlineStatus);

    updateOnlineStatus();

});

</script>

</body>

</html>

总结：

　　1、navigator.online属性提供浏览器是否在线的布尔值

　　2、浏览器脱机或上线还支持online和offline事件（IE8需要给document.body绑定事件而不是window）

用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）的更多相关文章

  1. javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放（按Ctrl和+号键或者-号键的缩放）

    这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供java ...

  2. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  3. 使用JavaScript检测浏览器

    假设你真的需要检测浏览器的类型,使用JavaScript非常easy达到. View Demo Download Source from GitHub JavaScript有一个navigator的标 ...

  4. 检测浏览器版本类型的JavaScript代码，终极版

    下面的JavaScript代码,不仅可以判断PC端浏览器类型,还可以判断安卓.iOS.其他智能手机.平板电脑或游戏系统. 说废话貌似不是我的风格哈,直接上代码吧: var client = funct ...

  5. [译]JavaScript检测浏览器前缀

    原文地址: Detect Vendor Prefix with JavaScript 不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情.这些前缀可以用于CSS(比如 ...

  6. javascript 检测浏览器类型和版本的代码

    方法1:对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法.大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的. //获取IE浏览器的版 ...

  7. JavaScript检测浏览器

    Detect Browser <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（九） 之 用 Redis 实现用户在线离线状态消息处理（一）

    前言 上一篇中简单讲解了用Redis缓存在线用户逻辑.篇幅也比较小,本篇将详细实现用户的上线下线通知.图片效果转换功能.而且,代码和开发思路都会详细介绍. 效果展示 目前有三个用户,user1,use ...

  9. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（八） 之 用 Redis 实现用户在线离线状态消息处理

    前言 上篇的预告好像是“聊天室的小细节,你都注意到了吗?”.今天也是为那篇做铺垫吧.之前的版本有好多问题,比如:当前登录用户是否合法问题,userid参数如果随便传后台没有验证.还有一个致命的问题,用 ...

随机推荐

  1. C#中文乱码转换

    string text="中文";string keyword;byte[] buffer= Encoding.UTF8.GetBytes(text);keyword=Encodi ...

  2. Python/CMD 文件备份

    1.使用Python压缩文件并另存 import zipfile, os #备份文件ZIP格式: folder 目标文件夹 : Targetfolder:另存地址 def backuptozip(fo ...

  3. python Tk()生成的桌面的具体设置方法

    rom tkinter import * root = Tk() root['height'] = 300 #设置高 root['width'] = 500 #设置宽 root.title('魔方小站 ...

  4. Selenium2+python自动化49-判断文本（text_to_be_present_in_element）【转载】

    前言 在做结果判断的时候,经常想判断某个元素中是否存在指定的文本,如登录后判断页面中是账号是否是该用户的用户名. 在前面的登录案例中,写了一个简单的方法,但不是公用的,在EC模块有个方法是可以专门用来 ...

  5. k8s的Health Check（健康检查）

    强大的自愈能力是 Kubernetes 这类容器编排引擎的一个重要特性.自愈的默认实现方式是自动重启发生故障的容器.除此之外,用户还可以利用 Liveness 和 Readiness 探测机制设置更精 ...

  6. centos内核参数调优

    [net] ######################## cat /proc/sys/net/ipv4/tcp_syncookies # 默认值: # 作用:是否打开SYN Cookie功能,该功 ...

  7. 厦门大学XMUNET+ ubuntu连接方法

    编辑连接 输入用户名和密码就好了 ubuntu16.04

  8. 《深入理解Java虚拟机》学习笔记

    <深入理解Java虚拟机>学习笔记 一.走近Java JDK(Java Development Kit):包含Java程序设计语言,Java虚拟机,JavaAPI,是用于支持 Java 程 ...

  9. [centos6.5] yum makecache 连接错误的解决办法

    http://mirrors.163.com/.help/centos.html 访问这个就懂了

  10. [Jquery]斑马线表格

    <!doctype html> <html> <head> <script src='js/jquery-1.9.1.min.js'></scri ...