Автономный javascript скрипт для предупреждения об использовании cookies

Достаточно поместить данный код в ваш javascript файл и сообщение будет показано пользователю автоматически

(function (window, undefined){
    "use strict";
    var document = window.document;
    function log() {
        if (window.console && window.console.log) {
            for (var x in arguments) {
                if (arguments.hasOwnProperty(x)) {
                    window.console.log(arguments[x]);
                }
            }
        }
    }
    function AcceptCookie() {
        if (!(this instanceof AcceptCookie)) {
            return new AcceptCookie();
        }
        this.init.call(this);
        return this;
    }
    AcceptCookie.prototype = {
        init: function () {
            var self = this;
            if(self.readCookie('COOKIE_ASSEPT') == null)
            {
                self.appendCss();
                self.addCookieBar();
            }
            var clear_cookie_arr = self.getElementsByClass("pjClearCookie", null, "a");
            if(clear_cookie_arr.length > 0)
            {
                self.addEvent(clear_cookie_arr[0], "click", function (e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    self.eraseCookie('COOKIE_ASSEPT');
                    document.location.reload();
                    return false;
                });
            }
        },
        getElementsByClass: function (searchClass, node, tag) {
            var classElements = new Array();
            if (node == null) {
                node = document;
            }
            if (tag == null) {
                tag = '*';
            }
            var els = node.getElementsByTagName(tag);
            var elsLen = els.length;
            var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
            for (var i = 0, j = 0; i < elsLen; i++) {
                if (pattern.test(els[i].className)) {
                    classElements[j] = els[i];
                    j++;
                }
            }
            return classElements;
        },
        addEvent: function (obj, type, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(type, fn, false);
            } else if (obj.attachEvent) {
                obj["e" + type + fn] = fn;
                obj[type + fn] = function() { obj["e" + type + fn](window.event); };
                obj.attachEvent("on" + type, obj[type + fn]);
            } else {
                obj["on" + type] = obj["e" + type + fn];
            }
        },
        createCookie: function (name, value, days){
            var expires;
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                expires = "; expires="+date.toGMTString();
            } else {
                expires = "";
            }
            document.cookie = name+"="+value+expires+"; path=/";
        },
        readCookie: function (name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') {
                    c = c.substring(1,c.length);
                }
                if (c.indexOf(nameEQ) === 0) {
                    return c.substring(nameEQ.length,c.length);
                }
            }
            return null;
        },
        eraseCookie: function (name) {
            var self = this;
            self.createCookie(name,"",-1);
        },
        appendCss: function()
        {
            var self = this;

            var cssCode = "";
            cssCode += "#a--bar { position: fixed; bottom: 0; left: 0; z-index: 9999; overflow-x: hidden; overflow-y: auto; width: 100%; max-height: 100%; padding: 20px 0; background: #000; border-top:1px solid #fff; opacity: 1; font-family: inherit; text-align: center;}";
            cssCode += "#a--bar * { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }";
            cssCode += "#a--bar .a--shell { width: 90%; margin: 0 auto; }";
            cssCode += "#a--bar a[href^=tel] { color: inherit; }";
            cssCode += "#a--bar a:focus,";
            cssCode += "#a--bar button:focus { outline: unset; outline: none; }";
            cssCode += "#a--bar p { font-size: 14px; line-height: 1.4; color: #fff; font-weight: 400; }";
            cssCode += "#a--bar .a--actions { padding-top: 10px; }";
            cssCode += "#a--bar .a--but { position: relative; display: inline-block; height: 40px; padding: 10px 30px; border: 0; background: #fff; opacity: 0.9; font-size: 14px; line-height: 14px; color: #000; text-decoration: none; vertical-align: middle; cursor: pointer; border-radius: 0; -webkit-appearance: none; -webkit-border-radius: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s}";
            cssCode += "#a--bar .a--but:hover {background-color:#ccc}";
            cssCode += "@media only screen and (max-width: 767px) {";
            cssCode += "#a--bar { padding: 15px 0; }";
            cssCode += "#a--bar .a--shell { width: 96%; }";
            cssCode += "#a--bar p { font-size: 14px; }";
            cssCode += "}";
            var styleElement = document.createElement("style");
            styleElement.type = "text/css";
            if (styleElement.styleSheet) {
                styleElement.styleSheet.cssText = cssCode;
            } else {
                styleElement.appendChild(document.createTextNode(cssCode));
            }
            document.getElementsByTagName("head")[0].appendChild(styleElement);
        },
        addCookieBar: function(){
            var self = this;
            var htmlBar = '';
            htmlBar += '<div class="a--shell"><form action="#" method="post">';
            htmlBar += '<p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p>';
            htmlBar += '<div class="a--actions"><button type="button" class="a--but">Понимаю и соглашаюсь</button></div></form></div>';
            var barDiv = document.createElement('div');
            barDiv.id = "a--bar";
            document.body.appendChild(barDiv);
            barDiv.innerHTML = htmlBar;
            self.bindCookieBar();
        },
        bindCookieBar: function(){
            var self = this;
            var btn_arr = self.getElementsByClass("a--but", null, "button");
            if(btn_arr.length &gt; 0)
            {
                self.addEvent(btn_arr[0], "click", function (e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    self.createCookie('COOKIE_ASSEPT', 'YES', 365);
                    document.getElementById("a--bar").remove();
                    return false;
                });
            }
        }
    };
    window.AcceptCookie = AcceptCookie;
})(window);

window.onload = function() {AcceptCookie = AcceptCookie();}

Выглядит это так:

Оригинал найден здесь

Теги: Javascript

Автор статьи

Александр Тихий

Fullstack-разработчик · 1С-Битрикс

Разрабатываю и развиваю интернет-магазины и корпоративные порталы на 1С-Битрикс. Интеграции с 1С, highload-нагрузки, безопасность по 152-ФЗ.

Позвонить Написать Telegram Макс