如今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. linux驱动学习（八） i2c驱动架构（史上最全） davinc dm368 i2c驱动分析【转】

    转自:http://blog.csdn.net/ghostyu/article/details/8094049 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 预备知识 lin ...

  2. Linux内核：关于中断你需要知道的【转】

    转自:http://blog.csdn.net/duqi_2009/article/details/38009717 1.中断处理程序与其他内核函数真正的区别在于,中断处理程序是被内核调用来相应中断的 ...

  3. AWS Ubuntu部署EMQTT的小坑

    Redis身份认证中的 is_superuser 表示不查检用户密码和ACL规则 如果是Ubuntu,集群设置节点名须改为:ubuntu@私有Ip,安全组最好相互开放所有端口 如果使用了ELB,EMQ ...

  4. 【 总结 】linux中test命令详解

    test命令在bash shell脚本中经常以中括号([])的形式出现,而且在脚本中使用字母来表示比符号表示更专业,出错率更低. 测试标志 代表意义 文件名.文件类型 -e 该文件名是否存在 -f 该 ...

  5. setCharacterEncoding 和 setContentType

    request.setCharacterEncoding("gbk"); response.setContentType("text/html;charset=gbk&q ...

  6. Docker容器进入的4种方式(转)

    这个文章不错,几种方式及使用范围都讲得清楚. 另外,还有一个文章说了为什么docker中并不合适ssh服务安装的情况. 我现在也是用第四种方式, docker exec -it [docker容器ID ...

  7. GridView的TemplateField

    BoundField只能显示一个单独的数据字段.如果我们想要在一个GridView列中显示两个或者更多的数据字段的值的时候该怎么办呢? 1. GridView的一列同时显示数据源中的两个字段 现需要显 ...

  8. Ubuntu 14.04 安装JDK 8

    1.安装JDK,参考 1.下载 JDK 8 从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 ...

  9. HDU 2673 （排序）

    Acmer in HDU-ACM team are ambitious, especially shǎ崽, he can spend time in Internet bar doing proble ...

  10. POJ2513Colored Sticks（欧拉通路）（字典树)(并查集）

                                                             Colored Sticks Time Limit: 5000MS   Memory ...