offline.js是一款浏览器端检测网络断线在线离线状态的插件-BFW插件库

offline.js是一款浏览器端检测网络断线在线离线状态的插件

offline.min.js通过监视 ajax 请求以查找故障，通过请求图像或虚假资源来确认连接状态，自动抓取连接关闭时发出的 ajax 请求并重新生成它们连接恢复后。

使用方式：

配置参数

Offline.options={配置}，默认参数可以不写

Offline.options={
  // Should we check the connection status immediatly on page load.
  checkOnLoad: false,

  // Should we monitor AJAX requests to help decide if we have a connection.
  interceptRequests: true,

  // Should we automatically retest periodically when the connection is down (set to false to disable).
  reconnect: 
    // How many seconds should we wait before rechecking.
    initialDelay: 3,

    // How long should we wait between retries.
    delay: (1.5 * last delay, capped at 1 hour)
  },

  // Should we store and attempt to remake requests which fail while the connection is down.
  requests: true,

  // Should we show a snake game while the connection is down to keep the user entertained?
  // It's not included in the normal build, you should bring in js/snake.js in addition to
  // offline.min.js.
  game: false
}

方法：

Offline.check()：检查连接的当前状态。

Offline.state：连接“向上”或“向下”的当前状态

Offline.on(event, handler, context)：绑定事件。

事件：

up：连接已从断开变为连接状态
down：连接已从连接状态变为断开
confirmed-up：连接测试已成功，即使连接已经处于连接状态也会触发
confirmed-down：连接测试失败，即使连接已经处于断开状态也会触发
checking：我们正在测试连接
reconnect:started：我们正在开始重新连接的过程
reconnect:stopped：我们已经停止尝试重新连接
reconnect:tick：在重新连接尝试期间每秒触发一次，当未进行检查时触发
reconnect:connecting：我们正在重新连接
reconnect:failure：重新连接检查尝试失败
requests:flush：任何未决请求已重新发起
requests:capture：正在保存新请求。

Offline.off(event, handler)：解绑事件

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/offline.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
 $(function(){


        Offline.on('confirmed-down', function () {
          $('#notice').html("网络断了");
        });

        Offline.on('confirmed-up', function () {
            $('#notice').html("网络恢复了");
        });

    });

    </script>
     <style>
      </style>
</head>
<body>
    <div id="notice">
        
    </div>
</body>
</html>