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

Материал из Umicms
Перейти к:навигация, поиск
Строка 1: Строка 1:
 
Большинство ресурсов в Сети ориентированы на широкую целевую аудиторию, но также существуют ресурсы, посещение которых определенными группами пользователей нежелательно. Чтобы предупредить пользователя зашедшего на подобный сайт и получить от него согласие на просмотр ресурса можно воспользоваться различными программными решениями. В данной статье будет рассмотрен самый простой способ с использованием технологии JavaScript.
 
Большинство ресурсов в Сети ориентированы на широкую целевую аудиторию, но также существуют ресурсы, посещение которых определенными группами пользователей нежелательно. Чтобы предупредить пользователя зашедшего на подобный сайт и получить от него согласие на просмотр ресурса можно воспользоваться различными программными решениями. В данной статье будет рассмотрен самый простой способ с использованием технологии JavaScript.
  
−
В JavaScript сущестуют события, позволяющее вывести для пользователя всплывающее окно и получить от него информацию.
+
В JavaScript сущестуют события позволяющее вывести для пользователя всплывающее окно и получить от него информацию.
 
Таких событий всего 3: ''Alert'' (выводит сообщение с кнопкой OK), ''Confirm'' (позволяет либо согласиться либо отказаться с каким-то сообщением) и ''Prompt'' (позволяет получить от пользователя какую-либо текстовую информацию).
 
Таких событий всего 3: ''Alert'' (выводит сообщение с кнопкой OK), ''Confirm'' (позволяет либо согласиться либо отказаться с каким-то сообщением) и ''Prompt'' (позволяет получить от пользователя какую-либо текстовую информацию).
  
−
Особенность данных диалоговых окон в том, что пока пользователь не закроет окно, он не сможет воспользоваться сайтом.
+
Особенность данных диалоговых окон в том, что пока пользователь не закроет окно он не сможет воспользоваться сайтом.
  
 
В JavaScript также имеются возможности по работе с cookies. Комбинируя работу с диалоговыми окнами и с cookies мы можем успешно решить поставленную задачу.
 
В JavaScript также имеются возможности по работе с cookies. Комбинируя работу с диалоговыми окнами и с cookies мы можем успешно решить поставленную задачу.
  
−
Для работы с cookies, воспользуемся готовыми решениями:
+
Для работы с cookies, воспользуемся готовым решением, а именно скриптом jquery.cookie.js написанным на JQuery. Данный скрипт подключается системой по умолчанию из директории /js/.
 +
 
 +
Функция, котороя позволяет установить куку в браузер пользователя:  
 +
  $.cookie('myage', 'iam18');
 +
  где, 'myage' - имя куки,
 +
        'iam18' - значение куки
  
−
Функция, котороя позволяет установить куку в браузер пользователя:
+
Функция, которая позволяет получить куку из браузера пользователя:  
−
<source lang="php">
+
  $.cookie('myage');
−
function setCookie(name, value, expires, path, domain, secure) {
+
Функция, которая позволяет удалить куку из браузера пользователя:
−
    if (!name || !value) return false;
+
   $.cookie('myage', null);
−
    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;
 
−
}
 
−
</source>
 
−
 
 
−
Данная функция принимает 6 параметров (имя куки, значение, время жизни, путь, домен, секретный параметр), обязательными являются только 2 (имя и значение).
 
−
Далее, в функции проверяется наличие в переданных ей параметрах имени и значения, если таких параметров передано не было, то функция возвращает '''false''' и прекращает свою работу. Если такие параметры существуют, то мы создаем переменную ''str'' и составляем строку с имеющимися параметрами, после чего устанавлеваем куку и возвращаем '''true'''.
 
  
−
Функция, которая позволяет получить куку из браузера пользователя:
+
Теперь осталось написать свою функцию по проверке куки и ответа от пользователя:
−
<source lang="php">
 
−
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);
 
−
}
 
−
</source>
 
−
Данная функция принимает только один параметр (имя куки), которое нам будет необходимо найти и по нему получить значение. С помощью '''IndexOf''' функция ищет начало нашего имени вместе со знаком '=' и ищет первый после имени знак ';', далее функция получает подстроку между этими знаками, декодирует и возвращает её в переменной.
 
−
 
 
−
Теперь осталось написать свою функцию по проверке ответа от пользователя и куки:
 
 
<source lang="php">
 
<source lang="php">
 +
<script type="text/javascript">
 
function checkCookie()
 
function checkCookie()
 
{
 
{
−
myage = getCookie("myage");
+
     if ($.cookie('myage') == null || $.cookie('myage') == ''){
−
     if (myage == null || myage == ''){
+
answer=confirm("Внимание!\nВы заходите на ресурс для взрослых (18+).\nВы подтверждаете и гарантируете, что вам  
−
answer=confirm("Внимание!\nВы заходите на ресурс для взрослых (18+).\n
+
исполнилось не менее 18 лет?\nЕсли \"Да\", то нажмите на кнопку \"ОК\", если \"Нет\", то нажмите на кнопку \"Отмена\".");
−
Вы подтверждаете и гарантируете, что вам исполнилось не менее 18 лет?\n
 
−
Если \"Да\", то нажмите на кнопку \"ОК\", если \"Нет\", то нажмите на кнопку \"Отмена\".");
 
 
if (answer==true){
 
if (answer==true){
−
setCookie("myage", "yes18", 10, "/");
+
$.cookie('myage', 'iam18');
 
} else {
 
} else {
 +
$.cookie('myage', null);
 
alert("Вы отказались от просмотра нашего сайта!");
 
alert("Вы отказались от просмотра нашего сайта!");
 
window.location.replace('http://ya.ru');  
 
window.location.replace('http://ya.ru');  
Строка 68: Строка 37:
 
}
 
}
 
}
 
}
 +
</script>
 
</source>
 
</source>
−
Функция не получает никаких параметров. В ней мы объявляем переменную ''myage'' и с помощью функции ''getCookie("myage")'' получаем в неё куку из браузера пользователя.
+
Функция не получает никаких параметров. В ней мы проверяем наличие в браузере пользователя куки с нашим значением (мы проверяем это на значения ''null'' и ''пустую строку'').
−
Если же у пользователя не было таковой куки (мы проверям это на значения ''null'' и ''пустую строку''), то показываем пользователю вопрос о желании посещения ресурса, результат ответа записываем в переменную ''answer''. Далее мы проверяем, если пользователь согласился на посещение ресурса (''answer==true''), то с помощью функции ''setCookie("myage", "yes18", 10, "/")'' мы устанавливаем куку с именем ''"myage"'', значением ''"yes18"'', длительностью в 10 дней. Если пользователь отказался, то сообщаем ему об этом и переадресовываем на другой адрес (например, на поисковую систему).
+
Если у пользователя нет нашей куки , то мы показываем пользователю вопрос о желании посещения ресурса, результат ответа записываем в переменную ''answer''. Далее мы проверяем, если пользователь согласился на посещение ресурса (''answer==true''), то устанавливаем в его браузер куку с именем ''"myage"'' и значением ''"yes18"'':
 +
    ''$.cookie('myage', 'iam18');''
 +
Если пользователь отказался от посещения сайта, то сообщаем ему об этом и переадресовываем на другой адрес (например, на поисковую систему).
  
−
Теперь, настало время разместить данные функции в нужном месте и вызвать их при загрузке страницы.
+
Теперь настало время разместить данные функции в нужном месте и вызвать их при загрузке страницы.
−
Соеденим все функции в один скрипт:
 
−
<source lang="php">
 
−
<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>
 
−
</source>
 
 
Разместим данный скрипт в шаблоне шапки страницы (header), между тегами ''<head> </head>''.
 
Разместим данный скрипт в шаблоне шапки страницы (header), между тегами ''<head> </head>''.
 
Там же найдем тег ''<body>'', он нам будет нужен, чтобы запустить скрипт до загрузки страницы.
 
Там же найдем тег ''<body>'', он нам будет нужен, чтобы запустить скрипт до загрузки страницы.
−
У тега ''<body>'' имеется событие ''onload=""'', передадим ему нашу функцию по проверке:
+
У тега ''<body>'' имеется событие ''onload=""'', передадим ему нашу функцию по проверке куки:
−
<source lang="php">
+
    <body  onload="checkCookie()">
−
<body  onload="checkCookie()">
 
−
</source>
 
  
 
Всё функционал уже должен работать.
 
Всё функционал уже должен работать.

Версия 10:49, 19 июля 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>
Источник — «https://wiki.umisoft.ru/index.php?title=Предупреждение_при_посещении_сайта&oldid=3788»