Проверьте, подключен ли к сети;JQuery - PullRequest
Новая
       2

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

17 голосов
/ 02 марта 2012

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

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

Спасибо

Ответы [ 7 ]

22 голосов
/ 05 марта 2012

Вам на самом деле не нужен 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, не указанные в манифесте, заблокированы от загрузки. Вот почему я исправил вышеуказанный манифест с подстановочными знаками (*), чтобы разрешить «остальное». Это может помочь вам начать.

22 голосов
/ 02 марта 2012

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

if (navigator.onLine) {
    // I'm online so submit the form.
}
17 голосов
/ 02 марта 2012

Вы можете проверить свойство 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 голосов
/ 19 марта 2015

Я использую следующий код для проверки подключения.ПРИМЕЧАНИЕ. Ни одно из перечисленных выше решений не работает для 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();
});
3 голосов
/ 05 марта 2012

попытайтесь настроить 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
    }
});
2 голосов
/ 22 ноября 2012

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

Тем не менее, вот простой пример 

<!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/

0 голосов
/ 02 марта 2012

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

Сначала используйте ссылку на библиотеку 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...