Обнаружить подключение к Интернету в автономном режиме?

IE 8 будет поддерживать

есть несколько способов сделать это:

• AJAX запрос на ваш собственный веб-сайт. Если этот запрос не удастся, есть хороший шанс, что это ошибка соединения. The в jQuery в документации есть раздел обработка неудачных запросов AJAX. Остерегайтесь Та Же Политика Происхождения при этом, что может остановить вас от доступа к сайтам за пределами вашего домена.

• вы могли бы поставить onerror на img, как

  <img src='http://www.example.com/singlepixel.gif' 
        onerror='alert("Connection dead");' />
  

  этот метод также может потерпеть неудачу, если исходное изображение будет перемещено / переименовано и, как правило, будет уступать опции ajax.

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

 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }

API кэша приложений HTML5 указывает навигатор.онлайн, который в настоящее время доступен в IE8 betas, WebKit (например. Safari) nightlies, и уже поддерживается в Firefox 3

как olliej сказал, используя navigator.onLine свойство браузера предпочтительнее отправки сетевых запросов и, соответственно, с developer.mozilla.org/En/Online_and_offline_events, он даже поддерживается старыми версиями Firefox и IE.

недавно WHATWG указала добавление online и offline события, в случае, если вам нужно реагировать на navigator.onLine изменения.

Пожалуйста, обратите внимание на ссылку, опубликованную Даниэль Сильвейра, который указывает что полагаться на эти сигнал/свойство для синхронизации с сервером не всегда хорошая идея.

можно использовать $.ajax () ' s error обратный вызов, который срабатывает при сбое запроса. Если textStatus равно строке "timeout" это, вероятно, означает, что соединение нарушено:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

С doc:

: функция, вызываемая при запросе неудачи. Функция передается три аргумента: объект XMLHttpRequest , строка, описывающая тип ошибки что произошло и необязательно исключение объект, если произошел. Возможные значения для второго аргумент (кроме null) - " timeout", "error", "notmodified" и "parsererror". Это событие Ajax

например:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });

мне пришлось сделать веб-приложение (на основе ajax) для клиента, который много работает со школами, в этих школах часто плохое подключение к интернету я использую эту простую функцию, чтобы определить, есть ли соединение, работает очень хорошо!

Я использую CodeIgniter и Jquery:

    function checkOnline(){
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck(){
    var submitURL = $("#base_path").val() + "index.php/menu/online";//if the server can be reached it returns 1, other wise it times out
    $.ajax({
        url     : submitURL     ,
        type    : 'post'        ,
        dataType: 'msg'         ,
        timeout : 5000          ,
        success : function(msg){
            if(msg==1){
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            }else{
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        }   ,
        error   : function(){
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}

вызов ajax в ваш домен-самый простой способ определить, находитесь ли вы в автономном режиме

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

это просто, чтобы дать вам концепцию, она должна быть улучшена, проверьте коды состояния http и т. д.

Я думаю, что это очень простой способ.

var x = confirm("Are you sure you want to submit?");
if(x){
    if(navigator.onLine == true) {
        return true;
    } else {
        alert('Internet connection is lost');
        return false; 
    }
}
else {
    return false;
}

Я искал решение на стороне клиента, чтобы определить, если интернет не работает или мой сервер не работает. Другие решения, которые я нашел, всегда, казалось, зависели от стороннего файла сценария или изображения, которое мне не казалось, что оно выдержит испытание временем. Внешний размещенный сценарий или образ могут измениться в будущем и привести к сбою кода обнаружения.

Я нашел способ обнаружить его, ища xhrStatus с кодом 404. Кроме того, я использую JSONP для обхода Ограничение CORS. Код статуса 404 показывает подключение к интернету не работает.

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});

очень интересный скрипт, который возобновляет многое из вышеперечисленного:

http://www.codeproject.com/KB/scripting/InternetConnectionTest.aspx

Это очень полезно, и потому, что это Ajax на основе, asyncronous, так что вы можете проверить, если интернет подключен, не выходя из исходной страницы. Используя это с таймером, вы также можете иметь компонент на странице, проверяющий каждые n минут.

мой путь.

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

есть 2 ответа для двух разных сенариев: -

1. Если вы используете JavaScript на веб-сайте(i.e; или любая передняя часть) Самый простой способ сделать это:

   <h2>The Navigator Object</h2>
   
   <p>The onLine property returns true if the browser is online:</p>
   
   <p id="demo"></p>
   
   <script>
     document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
   </script>
   

2. но если вы используете js на стороне сервера(i.e; узел etc.), Вы можете определить, что соединение потеряно, сделав неудачные запросы XHR.

   стандартный подход-повторить запрос несколько раз. Если он не проходит, предупреждает пользователя, чтобы проверить соединение, и терпит неудачу изящно.

головка запроса в ошибке запроса

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

вот фрагмент вспомогательной утилиты, которую я имею. Это пространство имен javascript:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

вы должны использовать это с обнаружением метода, иначе запустите "альтернативный" способ сделать это. Быстро приближается время, когда это будет все, что нужно. Другие методы-хаки.