Предупреждение при посещении сайта — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 51: Строка 51:
 
     <body  onload="checkCookie()">
 
     <body  onload="checkCookie()">
  
Всё функционал уже должен работать.
+
Всё, функционал уже должен работать.
  
 
Возможна ситуация, когда у пользователя отключен JavaScript, чтобы в этом случае затруднить пользователю просмотр ресурса, воспользуемся тегами ''<noscript> </noscript>''. Данный элемент должен быть написан сразу после тега <body>.
 
Возможна ситуация, когда у пользователя отключен JavaScript, чтобы в этом случае затруднить пользователю просмотр ресурса, воспользуемся тегами ''<noscript> </noscript>''. Данный элемент должен быть написан сразу после тега <body>.

Версия 09:04, 10 августа 2012

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