Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły Okienko z informacją o ciasteczkach (cookies)

Warsztat / Artykuły i tutoriale

Okienko z informacją o ciasteczkach (cookies)

Bartosz Romanowski 23 marca 2013 komentarze ()

22 marca 2013 roku weszła w życie znowelizowana ustawa Prawa Telekomunikacyjnego, na mocy której każdy serwis internetowy, który korzysta z ciasteczek (cookies), musi informować o tym fakcie swoich użytkowników. Przygotowaliśmy prosty skrypt, za pomocą którego można umieścić taką informację na dowolniej stronie w dosłownie trzy minuty.

Aby maksymalnie uprościć proces instalacji skryptu i uczynić go jak najbardziej uniwersalnym, został on umieszczony w jednym pliku i napisany w języku JavaScript.

Zasada jego działania jest bardzo prosta. Najpierw sprawdzamy, czy odwiedzająca naszą stronę osoba ma już utworzone przez nasz skrypt ciasteczko (cookie) o nazwie cookies_accepted. Jeśli nie, to wyświetlamy małe okienko "przyklejone" do górnej krawędzi okna przeglądarki, w którym znajduje się informacja o korzystaniu z ciasteczek oraz przycisk Rozumiem. Po kliknięciu przycisku okienko znika, a na komputerze użytkownika tworzone jest ciasteczko, dzięki któremu dana osoba nie zobaczy więcej okienka informacyjnego.

Kod HTML okienka z informacją znajduje się w zmiennej html_code i można go oczywiście dowolnie modyfikować.

Kod: Zaznacz cały
function WHCreateCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    var expires = "; expires=" + date.toGMTString();
	document.cookie = name+"="+value+expires+"; path=/";
}
function WHReadCookie(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;
}

window.onload = WHCheckCookies;

function WHCheckCookies() {
    if(WHReadCookie('cookies_accepted') != 'T') {
        var message_container = document.createElement('div');
        message_container.id = 'cookies-message-container';
        var html_code = '<div id="cookies-message" style="padding: 10px 0px; font-size: 14px; line-height: 22px; border-bottom: 1px solid #D3D0D0; text-align: center; position: fixed; top: 0px; background-color: #EFEFEF; width: 100%; z-index: 999;">Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. <a href="http://wszystkoociasteczkach.pl" target="_blank">Dowiedz się więcej</a><a href="javascript:WHCloseCookiesWindow();" id="accept-cookies-checkbox" name="accept-cookies" style="background-color: #00AFBF; padding: 5px 10px; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: inline-block; margin-left: 10px; text-decoration: none; cursor: pointer;">Rozumiem</a></div>';
        message_container.innerHTML = html_code;
        document.body.appendChild(message_container);
    }
}

function WHCloseCookiesWindow() {
    WHCreateCookie('cookies_accepted', 'T', 365);
    document.getElementById('cookies-message-container').removeChild(document.getElementById('cookies-message'));
}

Plik zawierający skrypt można pobrać tutaj (wersja dla kodowania ISO-8859-2). Wystarczy rozpakować pobrane archiwum i skopiować plik na swój serwer, a następnie dodać na stronie w sekcji head następujący kod:

Kod: Zaznacz cały
<script type="text/javascript" src="whcookies.js"></script>

Plik ze skryptem jest zapisany w UTF-8. Jeśli strona, na którą ma być wstawiony, korzysta z innego kodowania (np. ISO-8859-2), należy skonwertować plik do odpowiedniego formatu (większość edytorów kodu potrafi to zrobić) lub pobrać wersję dla kodowania ISO-8859-2.

W skrypcie skorzystałem ze zmodyfikowanych funkcji do tworzenia i odczytu ciasteczek, pochodzących z serwisu QuirksMode.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook