Сообщаем о разрыве сети

Если вы создаете проект, которым будут пользоваться люди, то важно понимать, что самое ценное это те данные, которые они вводят в ваши формы на сайте. Можно сохранять в localStorage, cookie или session те данные что вводит пользователь, а в случае ошибки - восстанавливать их.
Но, работая над одним проектом мы обнаружили, что самое досадное это то, когда в процессе заполнения формы у пользователя обрывается интернет-соединение и он отправляет форму, а там соответственно сообщение об ошибке, но уже браузера. Кнопка "Назад" в данном случае уже не помогает. Поэтому мы предлагаем вам решение, которые теперь сами используем на том проекте, и которое на самих спасало не раз.

Смысл в том, чтобы сообщить пользователю о том, когда обрывается соединение с интернетом. Кода тут мало, зато пользы выше крыши.

HTML

<div id="notify">Нет интернет соединения! Сохраните данные.</div>

CSS

#notify {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #ff9000;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    color: #fff;
    font-weight: bold;
    -webkit-box-shadow: 0 0 5px #333;
    -moz-box-shadow:    0 0 5px #333;
    box-shadow:         0 0 5px #333;
    display:none;
}

JavaScript

setInterval(function () {
  statusElem = navigator.onLine ? $('#notify').hide() : $('#notify').show();
}, 250);

Вот и все! 4 раза в секунду скрипт проверяет наличие доступного интернет-соединения, если соединение оборвано скрипт покажет сообщение об ошибке.

Пример. Попробуйте разорвать соединение с интернетом, а потом снова подключить его.

Понравился пост? Подпишитесь на RSS ленту или Twitter.
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Запись пока никто не оценил)
Loading ... Loading ...

Похожие записи

3 Комментариев на «Сообщаем о разрыве сети»

  • 8 Ноябрь, 2011, 8:47

    FF7 и Опера 11.52 — не работает пример.

    Thumb up 1 Thumb down 0

    Ответить

    makecode Ответил:

    Скорее всего не поддерживают пока эти свойства, надо будет подумать на этот счет, может аналог есть. Спасибо что сообщили.

    Thumb up 0 Thumb down 0

    Ответить

  • 28 Январь, 2012, 14:51

    Но последних версиях оперы тоже не работает

    Thumb up 0 Thumb down 0

    Ответить

Оставить комментарий