Показать блок div только 1 раз, код на JavaScript с cookie, без jQuery

Следующий скрипт выводит html-код в определённый блок div с помощью функции JavaScript innerHTML. И устанавливает переменную cookie, чтобы при повторном визите не показывать этот html-код.

Так, например, можно приветствовать посетителя или показать всплывающее окно с предложением вступить в группу, подписаться на новости или посмотреть акции магазина.
Почему без jQuery? - Чтобы не подключать лишний js, но в интернете примеры на jQuery преобладают.

  1. <div id="muz"></div>
  2.  
  3.  
  4. <script type="text/javascript">
  5. var Cookie = new Object();
  6. Cookie.set = function(name, value, expires, path, domain, secure) {
  7. document.cookie = name + "=" + escape(value) +
  8. ((expires) ? "; expires=" + expires : "") +
  9. ((path) ? "; path=" + path : "") +
  10. ((domain) ? "; domain=" + domain : "") +
  11. ((secure) ? "; secure" : "");
  12. }
  13. Cookie.get = function(name) {
  14. var prefix = name + "=";
  15. var cookieStartIndex = document.cookie.indexOf(prefix);
  16. if (cookieStartIndex == -1) return null;
  17. var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
  18. if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
  19. return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
  20. }
  21. Cookie.del = function(name, path, domain) {
  22. if (getCookie(name)) {
  23. document.cookie = name + "=" +
  24. ((path) ? "; path=" + path : "") +
  25. ((domain) ? "; domain=" + domain : "") +
  26. "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  27. }
  28. }
  29. var myVar = null;// просто переменная со значением, для проверки куки
  30. myVar = Cookie.get("musicplay");
  31. if (myVar != "1")// проверка на то есть куки или нет, если есть то не выполнять скрипт вставки кода в блок
  32. {
  33. //вставка html-кода музыки
  34. var DivMuz = document.getElementById('muz');
  35. var HtmlMuz='<iframe width="100%" height="130" frameborder="no" scrolling="no" src="http://www.mpsound.ru/embed.php?id=8805&autoplay=true"></iframe>';
  36. DivMuz.innerHTML = HtmlMuz;
  37.  
  38. var date = new Date(new Date().getTime() + 60 * 60 * 24 * 365 * 1000); // время жизни куки - 365 дней
  39. Cookie.set("musicplay", "1", date.toUTCString()); // установка куки (музыка проиграна)
  40. }
  41.  
  42. </script>

 
Чтобы вставить свои данные, используйте переменную HtmlMuz.
Чтобы сбросить значение куки и снова увидеть нужный html-код, очистите историю браузера или пользуйтесь режимом инкогнито, а также несколькими браузерами.
Подробнее о куки в JavaScript: https://learn.javascript.ru/cookie http://ruseller.com/lessons.php?id=593

Как работает этот скрипт

Блок div с id=muz необходим для обращения скрипта к этому элементу страницы и вставки html-кода в него. Этот блок должен размещаться в коде страницы выше скрипта.
Скрипт обращается к блоку в этой строке, создавая переменную DivMuz:

var DivMuz = document.getElementById('muz');

Далее содержимое переменной HtmlMuz вставляется внутрь этого элемента:

DivMuz.innerHTML = HtmlMuz;

Другие строки скрипта и функции работают с куки. Если использовать jQuery, работа с куки будет иметь меньше строк кода, но потребует подключения скрипта http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js весом 93Кб.

 

Уточнения по работе с cokie в JavaScript

Функциями Cookie.set, Cookie.det, Cookie.del можно пользоваться для извлечения многих переменных куки, то есть для каждой куки не обязательно создавать новый объект функцией newObject(). Но если вам нужно одновременно работать с различными куки и менять их динамично, тогда усовершенствование скрипта может потребовать нескольких объектов класса Cookie.

При обращении к элементам по html атрибуту id, регистр имеет значение.

Если вызывать функцию Cookie.set() без параметра путь и домен (это 3 и 4й параметры), тогда куки будет видна только на той странице, на которой она была установлена.

 

Просмотр всех куки сайта/страницы

В Google Chrome нажмите на значок слева от адреса страницы, в строке адреса - лист или замок, а затем - "Просмотреть cookie и данные сайта".
просмотр куки
Далее откройте нужную вам вкладку, раскрывая папки. Куки можно удалять. Некоторые куки имеют область видимости - конкретный путь сайта. Для использования куки на всех страницах сайта, нужно задавать путь "/", то есть вызывать функцию с четырьмя параметрами Cookie.set( name, value, date, path); - передать в поле path значение "/".