Проверьте, подключен ли к сети; JQuery

Я просматривал StackOverflow и видел различные темы о том, как это сделать, но ничего, что действительно относится к моей конкретной ситуации. Я пишу (для класса) мобильное "приложение" (используя HTML5, CSS, jQuery). В конечном итоге это будет самостоятельное приложение, которое будет содержать локальную копию всех необходимых файлов. На одной из моих страниц у меня есть форма отправки, и поскольку пользователь не может отправить форму, если они находятся в автономном режиме, я хотел бы, чтобы страница была перенаправлена ​​на пользовательскую страницу 404.

Я просто искал, есть ли способ выполнить это в jQuery, поскольку я еще ничего не нашел.

Спасибо

Ответы

Ответ 1

Вы можете использовать

if (navigator.onLine) {
    // I'm online so submit the form.
}

Ответ 2

Вам вообще не нужен jQuery для этого. Сам HTML5 имеет аккуратное средство для приложений, работающих в режиме онлайн/оффлайн - манифест кэша. Кэш-манифест представляет собой обычный текстовый файл, указанный в атрибуте manifest тега <html>:

<html manifest="cache.manifest">

Содержимое этого файла манифеста сообщает браузеру, какие ресурсы должны использовать онлайн-условия для работы (NETWORK), какие файлы кэшируются (CACHE) и что делать, когда сетевой ресурс запрашивается в автономном режиме (FALLBACK).

CACHE MANIFEST
# the above line is required

NETWORK:
*

FALLBACK:
*   error404.html

CACHE:
index.html
about.html
help.html
# Plus all other resources required to make it look nice
style/default.css
images/logo.png
images/backgound.png

При использовании манифеста браузер сначала обращается к манифесту и без каких-либо скриптов действует соответственно на основе онлайн-или офлайн-сообщений.

http://dev.w3.org/html5/spec-preview/offline.html#manifests

UPDATE:

Обратите внимание на важнейшее требование по типу содержимого ответа. Обычный текст просто не работает.

Манифесты должны обслуживаться с использованием типа text/cache-manifest MIME.

http://dev.w3.org/html5/spec-preview/offline.html#writing-cache-manifests

Также имейте в виду, что все URL-адреса, не указанные в манифесте, в результате блокируются от загрузки. Вот почему я исправил вышеуказанный манифест с помощью подстановочных знаков (*), чтобы разрешить "остальное". Это может помочь вам начать работу.

Ответ 3

Вы можете проверить свойство navigator.onLine или прослушать события offline/online:

$(document).on('offline online', function (event) {
    alert('You are ' + event.type + '!');
});

Источник: http://www.html5rocks.com/en/mobile/workingoffthegrid/

И вот несколько документов MDN для этих событий: https://developer.mozilla.org/en/Online_and_offline_events

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

Ответ 4

попробуйте настроить ajaxSetup для выполнения запроса каждые n миллисекунд (здесь я ставлю 1000) и проверить, не истечет ли это время, а затем отключить кнопку.

$.ajaxSetup({
    timeout: 1000, 
    error: function(request, status, maybe_an_exception_object) {
        if(status != 'timeout')
            //Code to enable button
        else
             //Code to disable button
    }
});

Ответ 5

Я использую следующий код для проверки возможности подключения. ПРИМЕЧАНИЕ. Ни одно из вышеперечисленных решений не работает для Firefox, который полагается на свой внутренний статус "Работа в автономном режиме":

// Register listeners
window.addEventListener("offline", function(){
    $('#globalDiv').hide();
    $("#message").html('WARNING: Internet connection has been lost.').show();
});
window.addEventListener("online", function(){
    $("#message").empty().hide();
    $('#globalDiv').show();
});

Ответ 6

Использование window.navigator.onLine наследует ненадежность, поскольку пользователь может быть подключен к сети, но эта сеть не может иметь доступ в Интернет.

Однако, здесь приведен пример barebones

<!DOCTYPE HTML>
<html>
 <head>
  <title>Online status</title>
  <script>
   function updateIndicator() {
     document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
   }
  </script>
 </head>
 <body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
  <p>The network is: <span id="indicator">(state unknown)</span>
 </body>
</html>​

Смотрите скрипту в действии: http://jsfiddle.net/3rRWK/

Ответ 7

Вот что я сделал бы, основываясь на: как проверить, имеет ли пользователь подключение к Интернету

Сначала используйте ссылку библиотеки javascript, чтобы определить, находится ли пользователь в сети. Если true, измените свойство действия вашей формы на онлайн-страницу, а затем на странице офлайн.

    <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js></script>
    <script>
$('#target').submit(function() {
   if (typeof window.$ !== 'function') {
    $('myform').attr( "action" , "offlinepage.html"  );
   }
   else
   {
    $('myform').attr( "action" , "onlinepage.html"  );
   }
});
    </script>