Предупреждение при посещении сайта

Материал из Umicms
Перейти к:навигация, поиск

Актуально для версии 2.9

Большинство ресурсов в Сети ориентированы на широкую целевую аудиторию, но также существуют ресурсы, посещение которых определенными группами пользователей нежелательно. Чтобы предупредить пользователя зашедшего на подобный сайт и получить от него согласие на просмотр ресурса можно воспользоваться различными программными решениями. В данной статье будет рассмотрен самый простой способ с использованием технологии JavaScript.

В JavaScript сущестуют события позволяющее вывести для пользователя всплывающее окно и получить от него информацию. Таких событий всего 3: Alert (выводит сообщение с кнопкой OK), Confirm (позволяет либо согласиться либо отказаться с каким-то сообщением) и Prompt (позволяет получить от пользователя какую-либо текстовую информацию).

Особенность данных диалоговых окон в том, что пока пользователь не закроет окно он не сможет воспользоваться сайтом.

В JavaScript также имеются возможности по работе с cookies. Комбинируя работу с диалоговыми окнами и с cookies мы можем успешно решить поставленную задачу.

Для работы с cookies, воспользуемся готовым решением, а именно скриптом jquery.cookie.js написанным на JQuery. Данный скрипт подключается системой по умолчанию из директории /js/.

Функция, котороя позволяет установить куку в браузер пользователя:

  $.cookie('myage', 'iam18');
  где, 'myage' - имя куки,
       'iam18' - значение куки

Функция, которая позволяет получить куку из браузера пользователя:

  $.cookie('myage');

Функция, которая позволяет удалить куку из браузера пользователя:

  $.cookie('myage', null);

Теперь осталось написать свою функцию по проверке куки и ответа от пользователя:

<script type="text/javascript">
function checkCookie()
{
    if ($.cookie('myage') == null || $.cookie('myage') == ''){
		answer=confirm("Внимание!\nВы заходите на ресурс для взрослых (18+).\nВы подтверждаете и гарантируете, что вам 
исполнилось не менее 18 лет?\nЕсли \"Да\", то нажмите на кнопку \"ОК\", если \"Нет\", то нажмите на кнопку \"Отмена\".");
		if (answer==true){
			$.cookie('myage', 'iam18');
		} else {
			$.cookie('myage', null);
			alert("Вы отказались от просмотра нашего сайта!");
			window.location.replace('http://ya.ru'); 
		}
	}
}
</script>

Функция не получает никаких параметров. В ней мы проверяем наличие в браузере пользователя куки с нашим значением (мы проверяем это на значения null и пустую строку). Если у пользователя нет нашей куки , то мы показываем пользователю вопрос о желании посещения ресурса, результат ответа записываем в переменную answer. Далее мы проверяем, если пользователь согласился на посещение ресурса (answer==true), то устанавливаем в его браузер куку с именем "myage" и значением "yes18":

   $.cookie('myage', 'iam18');

Если пользователь отказался от посещения сайта, то сообщаем ему об этом и переадресовываем на другой адрес (например, на поисковую систему).

Теперь настало время разместить данные функции в нужном месте и вызвать их при загрузке страницы.

Разместим данный скрипт в шаблоне шапки страницы (header), между тегами <head> </head>. Там же найдем тег <body>, он нам будет нужен, чтобы запустить скрипт до загрузки страницы. У тега <body> имеется событие onload="", передадим ему нашу функцию по проверке куки:

   <body  onload="checkCookie()">

Всё, функционал уже должен работать.

Возможна ситуация, когда у пользователя отключен JavaScript, чтобы в этом случае затруднить пользователю просмотр ресурса, воспользуемся тегами <noscript> </noscript>. Данный элемент должен быть написан сразу после тега <body>. Внутрь элемента <noscript> мы разместим css-заглушку с предупреждением:

<noscript>
<div style="background-color: #FFFBCC;
    border: 1px solid #888888;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 5px 5px 5px #544A35;
    font-size: 2em;
    line-height: 100px;
    left: 40%;
    margin-left: -275px;
    padding: 20px;
    position: absolute;
    top: 100px;
    width: 750px;
    height: 350px;
    z-index: 9999999;">
В вашем браузере отключен JavaScript.
<br />
Пожалуйста, включите его в настройках вашего браузера,
<br />
если желаете работать с нашим сайтом.
</div>
</noscript>

Примечание: Если у Вас не работает функция, то это возможно из-за того, что Вы скопировали текст функции как есть, а в целях форматирования кода в текст были вставлены переводы строк. Попробуйте переписать текст предупреждения (Внимание!\nВы заходите...) и все заработает.