可以参考《 Navigator onLine 获取系统是否处于脱机模式》

online，offline 事件用来监测浏览器处于在线或离线状态。

HTML5 提出的离线存储，web应用程序可以在不连接互联网的情况下满足用户的部分需求，比如在线记事本。当没有连接互联网，也就是 offline 的时候，可以把用户的数据保存在本地，当用户连接到互联网的时候，也就是 online，再把数据发送到服务器。

online/offline 事件将触发在 body 元素上，并且沿着 document.body，document 和 window 的顺序冒泡。

ononline onoffline 事件

ononline 事件在浏览器开始在线工作时触发。onoffline 事件在浏览器离线工作时触发。

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<body>

编码示例

window. addEventListener

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>网络状态</title>
    <style type="text/css">
    </style>
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            window.addEventListener("offline", function (e) {
                console.log("offline");
                $("div").append("网络离线\t");
            });

            window.addEventListener("online", function (e) {
                console.log("online");
                $("div").append("网络正常\t");
            });
        });
    </script>
</head>
<body>
<p>自动监测网络状态</p>
<div></div>
</body>
</html>

如上所示为 PC 上Chrome 的结果，当电脑网络被禁用时，监测到网络离线，网络恢复时，监测到网络正常
如下所示为微信上点击链接打开的效果，同理当关闭 WIFI 与流量时，网络离线；当打开流量或 WIFI 时，监测到网络正常

body ononline

online/offline 事件可以直接绑定在 body 标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>网络状态</title>
    <style type="text/css">
    </style>
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script type="text/javascript">
        function netOnline(event) {
            console.log("online");
            $("div").append("网络连接正常\t");
        }

        function netOffline(event) {
            console.log("offline");
            $("div").append("网络已经断开\t");
        }
    </script>
</head>
<body ononline="netOnline()" onoffline="netOffline()">
<p>自动监测网络状态</p>
<div></div>
</body>
</html>

offline 与 online 事件监听浏览器是否在线

ononline onoffline 事件

编码示例

window. addEventListener

body ononline

猜你喜欢