Генератор favicon   •   Online-инструменты
305 просм
1 комм
Поделиться:

Проверка доступности Интернета на JavaScript

Все мы с вами пользуемся Интернетом. На компьютере или на мобильном устройстве – неважно, во всех них могут быть перебои в работе. Закончились деньги или просто отключился свет – при взаимодействии в таких условиях с вашим сайтом важные не сохраненные данные могут пропасть.

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

Модуль формируется из трех составляющих. Это верстка:

<div class="m_inCheck_main">

	<div class="m_inCheck" style="opacity: 0;">
 
		<div class="m_inCheck_padding">
			<div class="m_inCheck_title m_inCheck_all_text">У Вас остуствует Интернет!</div>
			<div class="m_inCheck_text m_inCheck_all_text">Дальнейшая работа с сайтом невозможна ...</div>
		</div>
    
		<div class="m_inCheck_hide" title="Скрыть уведомление" onclick='document.getElementsByClassName("m_inCheck")[0].classList.remove("m_inCheck_show");'></div>
  
	</div>
  
</div>

Оформление (стиль):

/** Copyright (c) 2018 Artem Malcov | https://www.pandoge.com/moduli_i_skripty/proverka-dostupnosti-interneta-na-javascript **/

.m_inCheck_main * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.m_inCheck_main *:before, .m_inCheck_main *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.m_inCheck {
	position: fixed;
	right: 15px;
	bottom: 15px;
	background: #d31c0c url('/img/bg.png');
	border-radius: 4px;
	width: 360px;
	height: 60px;
	border-top: 1px solid #ec3515;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	font-family: arial;
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	visibility: hidden;
}

.m_inCheck_title {
	font-size: 17px;
}

.m_inCheck_text {
	font-size: 13px;
	margin: -1px 0 0 0;
}

.m_inCheck_all_text {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	color: #fff;
}

.m_inCheck_padding {
	background: url('/img/info.png') no-repeat 14px center;
	background-size: 34px 34px;
	height: 59px;
	padding: 10px 0 0 62px;
}

.m_inCheck_hide {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	background: #a41d0a url('/img/close.png') no-repeat center center;
	transition: .2s;
}

.m_inCheck_hide:hover {
	cursor: pointer;
	background: #961800 url('/img/close.png') no-repeat center center;
	transition: .2s;
}

.m_inCheck_show {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1 !important;
	visibility: visible;
	z-index: 9999999;
}

И сам скрипт:

<script>
	setInterval(function() {
		
		var request_inCheck = new XMLHttpRequest();
		request_inCheck.open('GET', window.location.pathname, true);
		
		request_inCheck.addEventListener('readystatechange', function() {
			
			if(request_inCheck.status == 0) {
				document.getElementsByClassName("m_inCheck")[0].classList.add("m_inCheck_show");
			} else {
				document.getElementsByClassName("m_inCheck")[0].classList.remove("m_inCheck_show");
			}
			
		});

		request_inCheck.send();
		
	}, 5000); // Проверка каждые 5 секунд
</script>

Визуально это все выглядит так:

Проверка доступности Интернета на JavaScript

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

ФайлРазмерСсылка
1
комментарий
Егор Шульга
3.10 в 22:10
Хм.. как же navigator.onLine ?
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Текст комментария