Предупреждение при посещении сайта
Большинство ресурсов в Сети ориентированы на широкую целевую аудиторию, но также существуют ресурсы, посещение которых определенными группами пользователей нежелательно. Чтобы предупредить пользователя зашедшего на подобный сайт и получить от него согласие на просмотр ресурса можно воспользоваться различными программными решениями. В данной статье будет рассмотрен самый простой способ с использованием технологии 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>
Версия системы: 2.8.5.2
