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

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

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

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

В JavaScript также имеются возможности по работе с cookies. Cookies позволяют узнать пощещал ли пользователь нашу страницу или нет.

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

Для работы с cookies, воспользуемся готовыми решениями:

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

function setCookie(name, value, expires, path, domain, secure) {
	    if (!name || !value) return false;
	    var str = name + '=' + encodeURIComponent(value);
	    if (expires) str += '; expires=' + expires;
	    if (path)    str += '; path=' + path;
	    if (domain)  str += '; domain=' + domain;
	    if (secure)  str += '; secure';	     
	    document.cookie = str;
	    return true;
	}

Данная функция принимает 6 параметров (имя куки, значение, время жизни, путь, домен, секретный параметр), обязательными являются только 2 (имя и значение). Далее, в функции проверяется наличие в переданных ей параметрах имени и значения, если таких параметров передано не было, то функция возвращает false и прекращает свою работу. Если такие параметры существуют, то мы создаем переменную str и составляем строку с имеющимися параметрами, после чего устанавлеваем куку и возвращаем true.

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

function getCookie(name) {
	var cookie = " " + document.cookie;
	var search = " " + name + "=";
	var setStr = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
		offset = cookie.indexOf(search);
		if (offset != -1) {
			offset += search.length;
			end = cookie.indexOf(";", offset)
			if (end == -1) {
				end = cookie.length;
			}
			setStr = unescape(cookie.substring(offset, end));
		}
	}
	return(setStr);
}

Данная функция принимает только один параметр (имя куки), которое нам будет необходимо найти и по нему получить значение. С помощью IndexOf функция ищет начало нашего имени вместе со знаком '=' и ищет первый после имени знак ';', далее функция получает подстроку между этими знаками, декодирует и возвращает её в переменной.

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

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

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

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

<script type="text/javascript">
function setCookie(name, value, expires, path, domain, secure) {
	    if (!name || !value) return false;
	    var str = name + '=' + encodeURIComponent(value);
	    if (expires) str += '; expires=' + expires;
	    if (path)    str += '; path=' + path;
	    if (domain)  str += '; domain=' + domain;
	    if (secure)  str += '; secure';	     
	    document.cookie = str;
	    return true;
	}
function getCookie(name) {
	var cookie = " " + document.cookie;
	var search = " " + name + "=";
	var setStr = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
		offset = cookie.indexOf(search);
		if (offset != -1) {
			offset += search.length;
			end = cookie.indexOf(";", offset)
			if (end == -1) {
				end = cookie.length;
			}
			setStr = unescape(cookie.substring(offset, end));
		}
	}
	return(setStr);
}
function checkCookie()
{
	myage = getCookie("myage");
    if (myage == null || myage == ''){
		answer=confirm("Внимание!\nВы заходите на ресурс для взрослых (18+).\n
Вы подтверждаете и гарантируете, что вам исполнилось не менее 18 лет?\n
Если \"Да\", то нажмите на кнопку \"ОК\", если \"Нет\", то нажмите на кнопку \"Отмена\".");
		if (answer==true){
			setCookie("myage", "yes18", 10, "/");
		} else {
			alert("Вы отказались от просмотра нашего сайта!");
			window.location.replace('http://ya.ru'); 
		}
	}
}

</script>

Разместим данный скрипт в шаблоне шапки страницы (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>