Сегодня я хочу поделиться усовершенствованным скриптом, который управляет всплывающими окнами, используя cookies или localStorage, чтобы показывать их только один раз за заданный период.
Этот скрипт прост, надежен и готов к использованию в современных проектах.
Давайте разберем, что он делает и какие улучшения получил.
Что делает скрипт?
Скрипт решает задачу показа всплывающего окна с информацией (например, приветственным сообщением или акцией) только новым или возвращающимся пользователям, избегая раздражающих повторных показов. Он:Проверяет, видел ли пользователь окно, используя cookies или localStorage.
Показывает окно только при отсутствии метки в хранилище.
Сохраняет метку с заданным сроком действия (например, 1 день).
Обрабатывает ошибки и поддерживает современные стандарты безопасности.
Ключевые улучшения
Включает следующие доработки:Поддержка localStorage
Если браузер поддерживает localStorage, скрипт использует его вместо cookies. Это уменьшает объем данных, отправляемых в HTTP-запросах, и упрощает управление.
Обработка ошибок
Скрипт проверяет поддержку cookies и localStorage, а также логирует ошибки, если элемент с контентом не найден или библиотека _uWnd недоступна.
Современный синтаксис
Используется ES6+ (стрелочные функции, const, let, for...of), что делает код более читаемым и поддерживаемым.
Безопасность Cookies используют атрибут SameSite=Strict для защиты от CSRF-атак.
Значения cookies кодируются с помощью encodeURIComponent для предотвращения ошибок с символами.
Гибкость параметров
Параметры всплывающего окна (заголовок, размеры, поведение) передаются через объект, что упрощает настройку.
Модульность
Код организован как модуль (type="module"), что позволяет использовать его в современных проектах и изолировать от глобальной области видимости.
Как это работает?
HTML содержит скрытый div с контентом для всплывающего окна:html
Код
<div style="display: none;" id="popupContent">
Информация в окне
</div>
Информация в окне
</div>
При загрузке страницы скрипт проверяет, есть ли метка (uWnd75) в хранилище. Если метки нет, он:Сохраняет метку с указанным сроком действия (например, 1 день).
Извлекает содержимое div#popupContent.
Вызывает _uWnd для отображения окна с заданными параметрами (заголовок, ширина, высота и т.д.).
Если метка уже существует, окно не показывается, что предотвращает повторные показы.Пример использования Чтобы показать окно раз в неделю, просто измените вызов:javascript
Код
showPopup('uWnd75', 7, 'popupContent', { title: 'Акция недели!' });
Полный код.
Код
<div style="display: none;" id="popupContent">
Информация в окне
</div>
<script type="module">
// Проверка поддержки cookies и localStorage
const isCookiesSupported = () => 'cookie' in document;
const isLocalStorageSupported = () => {
try {
return 'localStorage' in window && window.localStorage !== null;
} catch (e) {
return false;
}
};
// Хранилище: используем localStorage, если доступно, иначе cookies
const storage = isLocalStorageSupported() ? {
set: (name, value, days) => {
const expires = days ? new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString() : '';
localStorage.setItem(name, JSON.stringify({ value, expires }));
},
get: (name) => {
const item = localStorage.getItem(name);
if (!item) return null;
const { value, expires } = JSON.parse(item);
if (expires && new Date(expires) < new Date()) {
localStorage.removeItem(name);
return null;
}
return value;
},
remove: (name) => localStorage.removeItem(name)
} : {
set: (name, value, days) => {
if (!isCookiesSupported()) return;
const date = new Date();
const expires = days ? `; expires=${date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000).toUTCString()}` : '';
document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/; SameSite=Strict`;
},
get: (name) => {
if (!isCookiesSupported()) return null;
const nameEQ = `${name}=`;
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.startsWith(nameEQ)) {
return decodeURIComponent(cookie.slice(nameEQ.length));
}
}
return null;
},
remove: (name) => {
if (!isCookiesSupported()) return;
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Strict`;
}
};
// Функция для показа всплывающего окна
const showPopup = (name, days, contentId, options = {}) => {
const {
title = 'Заголовок в окне',
width = 502,
height = 272,
maxHeight = 300,
minHeight = 100,
autosize = true
} = options;
if (storage.get(name)) return; // Если уже показано, выходим
// Устанавливаем метку в хранилище
storage.set(name, 'true', days);
// Предполагается, что _uWnd — это сторонняя библиотека для всплывающих окон
const content = document.getElementById(contentId)?.innerHTML;
if (!content) {
console.error(`Элемент с ID ${contentId} не найден`);
return;
}
try {
new _uWnd(name, title, width, height, { autosize, maxh: maxHeight, minh: minHeight }, content);
} catch (error) {
console.error('Ошибка при создании всплывающего окна:', error);
}
};
// Вызов функции
document.addEventListener('DOMContentLoaded', () => {
showPopup('uWnd75', 1, 'popupContent', {
title: 'Добро пожаловать!',
width: 502,
height: 272,
maxHeight: 300,
minHeight: 100,
autosize: true
});
});
// разработчик by jaguar37rus, site htmlstart.ucoz.net
</script>
Информация в окне
</div>
<script type="module">
// Проверка поддержки cookies и localStorage
const isCookiesSupported = () => 'cookie' in document;
const isLocalStorageSupported = () => {
try {
return 'localStorage' in window && window.localStorage !== null;
} catch (e) {
return false;
}
};
// Хранилище: используем localStorage, если доступно, иначе cookies
const storage = isLocalStorageSupported() ? {
set: (name, value, days) => {
const expires = days ? new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString() : '';
localStorage.setItem(name, JSON.stringify({ value, expires }));
},
get: (name) => {
const item = localStorage.getItem(name);
if (!item) return null;
const { value, expires } = JSON.parse(item);
if (expires && new Date(expires) < new Date()) {
localStorage.removeItem(name);
return null;
}
return value;
},
remove: (name) => localStorage.removeItem(name)
} : {
set: (name, value, days) => {
if (!isCookiesSupported()) return;
const date = new Date();
const expires = days ? `; expires=${date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000).toUTCString()}` : '';
document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/; SameSite=Strict`;
},
get: (name) => {
if (!isCookiesSupported()) return null;
const nameEQ = `${name}=`;
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.startsWith(nameEQ)) {
return decodeURIComponent(cookie.slice(nameEQ.length));
}
}
return null;
},
remove: (name) => {
if (!isCookiesSupported()) return;
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Strict`;
}
};
// Функция для показа всплывающего окна
const showPopup = (name, days, contentId, options = {}) => {
const {
title = 'Заголовок в окне',
width = 502,
height = 272,
maxHeight = 300,
minHeight = 100,
autosize = true
} = options;
if (storage.get(name)) return; // Если уже показано, выходим
// Устанавливаем метку в хранилище
storage.set(name, 'true', days);
// Предполагается, что _uWnd — это сторонняя библиотека для всплывающих окон
const content = document.getElementById(contentId)?.innerHTML;
if (!content) {
console.error(`Элемент с ID ${contentId} не найден`);
return;
}
try {
new _uWnd(name, title, width, height, { autosize, maxh: maxHeight, minh: minHeight }, content);
} catch (error) {
console.error('Ошибка при создании всплывающего окна:', error);
}
};
// Вызов функции
document.addEventListener('DOMContentLoaded', () => {
showPopup('uWnd75', 1, 'popupContent', {
title: 'Добро пожаловать!',
width: 502,
height: 272,
maxHeight: 300,
minHeight: 100,
autosize: true
});
});
// разработчик by jaguar37rus, site htmlstart.ucoz.net
</script>
Почему это круто?
Пользовательский опыт: Окно появляется только тогда, когда это уместно, не раздражая постоянных посетителей.
Производительность: Использование localStorage снижает нагрузку на сеть.
Надежность: Код устойчив к ошибкам и работает в большинстве современных браузеров.
Гибкость: Легко адаптировать под разные сценарии, например, для баннеров, оповещений или форм.
Как интегрировать?
Добавьте HTML-блок с уникальным id и нужным контентом.
Вставьте скрипт в <script type="module"> или отдельный файл.
Настройте вызов showPopup с желаемыми параметрами.
Логирование: Интегрируйте аналитику для отслеживания показов окна.
Заключение Этот скрипт — пример того, как современные веб-технологии могут упростить управление всплывающими окнами. Он надежен, безопасен и легко настраивается под ваши нужды. Попробуйте его на своем сайте и поделитесь впечатлениями в комментариях!
