JS Navigator onLine 获取系统是否处于脱机模式

╰+攻爆jí腚メ 2022-04-18 01:13 172阅读 0赞

很多时候 web 网页上需要判断或监听浏览器(系统)的网络状态。

# Navigator onLine 属性 #

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。

注：在 IE 4+ 中，用户可以在浏览器中选择脱机工作，当脱机工作被选后，系统就进入了脱机状态，内容将从缓存进行读取。

**语法**：navigator.onLine

所有主要浏览器都支持 onLine 属性

<!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>
        
        <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 () {
                $("button").click(function () {
                    if (navigator.onLine) {
                        console.log("online");
                        $("div").append("网络正常\t");
                    } else {
                        console.log("offline");
                        $("div").append("网络离线\t");
                    }
                });
            });
        </script>
    </head>
    <body>
    <button>获取网络状态</button>
    <div></div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

> PC 端亲测结果：
> 
> 1）当将电脑网络禁用，或者直接拔掉网线，点击按钮时，navigator.onLine 返回 false
> 
> 2）当浏览器能正常上网，点击按钮时，navigator.onLine 返回 true
> 
> 3）当手动修改电脑 IP 地址，使 ip 异常浏览器无法上网时，点击按钮，navigator.onLine 返回 taue，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

> 手机端亲测结果：
> 
> 1）当关闭 WIFI 与 流量时，点击按钮时，navigator.onLine 返回 false
> 
> 2）当打开 WIFI 或者 流量时，点击按钮，navigator.onLine 返回 true

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220418/70bb043ae3dc425a9938251e84c7ab63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220418/ee31eb6e641a46afb87930daedcbcc6d.png