Как обнаружить онлайн / офлайн кроссбраузер событий? - PullRequest
Новая
       43

Как обнаружить онлайн / офлайн кроссбраузер событий?

103 голосов
/ 05 июля 2010

Я пытаюсь точно определить, когда браузер отключается, используя HTML5 онлайн и офлайн события.

Вот мой код: 

<script>
    // FIREFOX
    $(window).bind("online", applicationBackOnline); 
    $(window).bind("offline", applicationOffline);

    //IE
    window.onload = function() {
        document.body.ononline = IeConnectionEvent;
        document.body.onoffline = IeConnectionEvent;
    } 
</script>

Это прекрасно работает, когда я просто нажимаю «Работать в автономном режиме» на Firefox или IE, но это вроде случайной работы, когда я на самом деле отключаю провод.

Какой лучший способ обнаружить это изменение? Я хотел бы избежать повторения вызовов ajax с таймаутами.

Ответы [ 14 ]

2 голосов
/ 15 апреля 2014

Пожалуйста, найдите модуль require.js, который я написал для Offline. 

define(['offline'], function (Offline) {
    //Tested with Chrome and IE11 Latest Versions as of 20140412
    //Offline.js - http://github.hubspot.com/offline/ 
    //Offline.js is a library to automatically alert your users 
    //when they've lost internet connectivity, like Gmail.
    //It captures AJAX requests which were made while the connection 
    //was down, and remakes them when it's back up, so your app 
    //reacts perfectly.

    //It has a number of beautiful themes and requires no configuration.
    //Object that will be exposed to the outside world. (Revealing Module Pattern)

    var OfflineDetector = {};

    //Flag indicating current network status.
    var isOffline = false;

    //Configuration Options for Offline.js
    Offline.options = {
        checks: {
            xhr: {
                //By default Offline.js queries favicon.ico.
                //Change this to hit a service that simply returns a 204.
                url: 'favicon.ico'
            }
        },

        checkOnLoad: true,
        interceptRequests: true,
        reconnect: true,
        requests: true,
        game: false
    };

    //Offline.js raises the 'up' event when it is able to reach
    //the server indicating that connection is up.
    Offline.on('up', function () {
        isOffline = false;
    });

    //Offline.js raises the 'down' event when it is unable to reach
    //the server indicating that connection is down.
    Offline.on('down', function () {
        isOffline = true;
    });

    //Expose Offline.js instance for outside world!
    OfflineDetector.Offline = Offline;

    //OfflineDetector.isOffline() method returns the current status.
    OfflineDetector.isOffline = function () {
        return isOffline;
    };

    //start() method contains functionality to repeatedly
    //invoke check() method of Offline.js.
    //This repeated call helps in detecting the status.
    OfflineDetector.start = function () {
        var checkOfflineStatus = function () {
            Offline.check();
        };
        setInterval(checkOfflineStatus, 3000);
    };

    //Start OfflineDetector
    OfflineDetector.start();
    return OfflineDetector;
});

Пожалуйста, прочитайте этот пост и дайте мне знать ваши мысли. http://zen -and-art-of-programming.blogspot.com / 2014/04 / html-5-offline-application-development.html Содержит пример кода с использованием offline.js, чтобы определить, когда клиент не в сети.

0 голосов
/ 25 января 2017

Использование тела документа: 

<body ononline="onlineConditions()" onoffline="offlineConditions()">(...)</body>

Использование события Javascript: 

window.addEventListener('load', function() {

  function updateOnlineStatus() {

    var condition = navigator.onLine ? "online" : "offline";
    if( condition == 'online' ){
        console.log( 'condition: online')
    }else{
        console.log( 'condition: offline')
    }

  }

  window.addEventListener('online',  updateOnlineStatus );
  window.addEventListener('offline', updateOnlineStatus );

});

Ссылка :
Тело документа: Событие on-line
Событие Javascript: События онлайн и офлайн

Дополнительные мысли:
КомуПохоже на то, что «сетевое соединение не совпадает с интернет-соединением». Проблема описанных выше способов: Вы можете проверить интернет-соединение один раз с помощью ajax при запуске приложения и настроить режим онлайн / офлайн.Создайте кнопку повторного подключения, чтобы пользователь мог выходить в интернет.И добавляйте к каждому неудавшемуся запросу ajax функцию, которая возвращает пользователя в автономный режим.

0 голосов
/ 29 июня 2016

хорошо, вы можете попробовать плагин javascript, который может контролировать соединение с браузером в режиме реального времени и уведомляет пользователя, если интернет или соединение браузеров с интернетом оборвалось.

Плагин Wiremonkey Javascript и демо вы можете найти здесь

http://ryvan -js.github.io /

0 голосов
/ 30 сентября 2014

Вот мое решение.

Протестировано с IE, Opera, Chrome, FireFox, Safari, как PhoneGap WebApp на IOS 8 и как Phonegap WebApp на Android 4.4.2

Это решение не работает с FireFox на localhost.

=============================================== ==================================

onlineCheck.js (путь к файлу: "root / js / onlineCheck.js): 

var isApp = false;

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    isApp = true;
    }


function isOnlineTest() {
    alert(checkOnline());
}

function isBrowserOnline(no,yes){
    //Didnt work local
    //Need "firefox.php" in root dictionary
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function(){
        if(yes instanceof Function){
            yes();
        }
    }
    xhr.onerror = function(){
        if(no instanceof Function){
            no();
        }
    }
    xhr.open("GET","checkOnline.php",true);
    xhr.send();
}

function checkOnline(){

    if(isApp)
    {
        var xhr = new XMLHttpRequest();
        var file = "http://dexheimer.cc/apps/kartei/neu/dot.png";

        try {
            xhr.open('HEAD', file , false); 
            xhr.send(null);

            if (xhr.status >= 200 && xhr.status < 304) {
                return true;
            } else {
                return false;
            }
        } catch (e) 
        {
            return false;
        }
    }else
    {
        var tmpIsOnline = false;

        tmpIsOnline = navigator.onLine;

        if(tmpIsOnline || tmpIsOnline == "undefined")
        {
            try{
                //Didnt work local
                //Need "firefox.php" in root dictionary
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
                xhr.onload = function(){
                    tmpIsOnline = true;
                }
                xhr.onerror = function(){
                    tmpIsOnline = false;
                }
                xhr.open("GET","checkOnline.php",false);
                xhr.send();
            }catch (e){
                tmpIsOnline = false;
            }
        }
        return tmpIsOnline;

    }
}

=============================================== ==================================

index.html (filepath: "root / index.html"): 

<!DOCTYPE html>
<html>


<head>
    ...

    <script type="text/javascript" src="js/onlineCheck.js" ></script>

    ...

</head>

...

<body onload="onLoad()">

...

    <div onclick="isOnlineTest()">  
        Online?
    </div>
...
</body>

</html>

=============================================== ==================================

checkOnline.php (filepath: "root"): 

<?php echo 'true'; ?>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...