zoukankan      html  css  js  c++  java
  • 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

      如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见。

      无论浏览器是否在线,navigator.onLine 属性都会提供一个布尔值。 如果浏览器在线,则设置为 true ,否则设置为 false

        if(navigator.onLine) { // true|false
            // ...
        }

    online 和 offline 事件:

      当浏览器脱机或上线时,浏览器还支持 onlineoffline 事件

    window.addEventListener('online', function(e){console.log('online')});
    window.addEventListener('offline', function(e){console.log('offline');});

      你可以使用几种熟悉的方式来注册事件:

    • windowdocument,或 document.body 上使用 addEventListener
    • documentdocument.bodyononlineonoffline 属性设置为一个 JavaScript Function 对象。(注意:由于兼容性原因,不能使用 window.ononlinewindow.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;
                 100%;
                font: bold 1em sans-serif;
                color: #FFF;
                padding: 0.5em;
            }
            #log {
                padding: 2.5em 0.5em 0.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)

  • 相关阅读:
    C++句柄类 [ 资深博主 ]
    [C/C++] 第18章:特殊工具与技术《 C++ Primer 》
    [C/C++] 读后的感觉《C++Primer》
    Oracle个人Blogs精华贴
    Oracle安装图解
    [转]怎么成为优秀的软件模型设计者
    如何写一份好的工程师简历[转载]
    如何准备软件工程师的面试[转载]
    JS倒计时
    10个最有前景的JavaScript框架
  • 原文地址:https://www.cnblogs.com/goloving/p/7688167.html
Copyright © 2011-2022 走看看