如今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. Opencv 中透视变换函数对IplImage图像变换时出现的问题？

    最近一直在做视频稳像的项目,为了简化部分实现,使用了部分Opencv的函数,其中包括Opencv中对IplImage进行同时变换的函数cvWarpPerspective(src, dst,...) 发 ...

  2. swt MouseAdapter

    Exception in thread "main" java.lang.Error: Unresolved compilation problem:     The method ...

  3. servlet(4) - servletAPI - 小易Java笔记

    Servlet规范核心类图 1.请求和响应对象 ==> HTTP协议包含请求和响应部分. ==> HttpServletRequest就代表着请求部分 ==> HttpServlet ...

  4. Tomcat下载安装及常见问题解决办法

    一.Tomcat的下载: 下载地址:http://tomcat.apache.org/ 下载Tomcat6.0(在左侧的Download下,考虑到稳定性现在企业大部分还在用Tomcat6.0) (1) ...

  5. 回车和换行有什么区别？我们平时按下的Enter键是回车还是换行？

    来源:http://www.52rd.com/blog/Detail_RD.Blog_imjacob_12317.html -------------------------------------- ...

  6. ros中删除某个包之后用apt安装的包找不到

    原因是工作空间devel里还存有原来的二进制可执行文件,将build和devel内容全删除后再catkin_make就好了

  7. 初探插头dp

    开学那个月学了点新东西,不知道还记不记得了,mark一下 感觉cdq的论文讲的很详细 题主要跟着kuangbin巨做了几道基础的 http://www.cnblogs.com/kuangbin/arc ...

  8. foreach 与 Linq的 Select 效率问题

    Resharper 是一个非常强大的C#编程辅助工具,有着非常强的提示功能,代码纠正,代码简化等等 在编码过程中注意到这么一件事,可能是大家经常会遇到的: 遍历某个集合,然后经过处理生成另外一个集合, ...

  9. React Native - 3 View, Text简介以及onPress & onLongPress事件

    我们要生成如下的构图   直接上图,不解释.       如下图所示,定义函数,函数之间不需要逗号,在元素上添加事件,使用关键字this.{function name}    

  10. [Jquery]斑马线表格

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