如今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. docker push 镜像到本地仓库

    root@ubuntu:# uname -a Linux ubuntu --generic #-Ubuntu SMP Mon Feb :: UTC x86_64 x86_64 x86_64 GNU/L ...

  2. mysql导入数据库出现:Incorrect string value: '\xE7\x82\xB9\xE9\x92\x9F' for column 'chinese' at row 1

    mysql导入数据库出现:Incorrect string value: '\xE7\x82\xB9\xE9\x92\x9F' for column 'chinese' at row 1 使用 sho ...

  3. 用maven创建第一个SpringMVC

    首先创建一个maven项目,然后依次完成如下配置: 在pom.xml加入如下基础配置,利用maven加载我们所需要的jar: <project xmlns="http://maven. ...

  4. Mac-item+zsh

    $brew cask install iterm2 $ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/m ...

  5. sqlalchemy源代码阅读随笔（2）

    这次阅读的,是Strategies.py文件. 文件自身,是这么描述的: """Strategies for creating new instances of Engi ...

  6. MATLAB二维插值和三维插值

    插值问题描述:已知一个函数上的若干点,但函数具体表达式未知,现在要利用已知的若干点求在其他点处的函数值,这个过程就是插值的过程. 1.一维插值 一维插值就是给出y=f(x)上的点(x1,y1),(x2 ...

  7. hadoop学习二：hadoop基本架构与shell操作

    1.hadoop1.0与hadoop2.0的区别:

  8. JavaScript代码放在head和body的区别(QRCode生成)

    1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始. 2.在body中时,直接加载并执行 典型的区别: 如果有不在函数中的执行语句,比如变量初始化,如果在hea ...

  9. 集训考试题tents

    题目描述Pb 去郊游啦!他来到一块空地打算在这里搭一个帐篷.但是,帐篷的四个支撑点不能在落在任何位置上,而只能落在一些固定点上.现在,他找到地面上有 N 个点可以支撑帐篷.(四个支撑点必须围成一个矩形 ...

  10. 学习LSM(Linux security module)之二:编写并运行一个简单的demo

    各种折腾,经过了一个蛋疼的周末,终于在Ubuntu14.04上运行了一个基于LSM的简单demo程序. 一:程序编写 先简单的看一下这个demo: //demo_lsm.c#include <l ...