Как удалить popup при переходе на другую страницу в WordPress без перезагрузки

Диагностика проблемы: почему popup остаётся после перехода

Во многих темах и плагинах popup окна создаются с помощью JavaScript и AJAX, что позволяет отображать контент без полной перезагрузки страницы. Однако при переходе по ссылкам внутри сайта настраивается AJAX-навигация (например, через плагин PJAX, TurboLinks или встроенные в тему решения), и popup не всегда корректно скрывается или удаляется. В результате пользователь видит устаревшее окно, которое мешает взаимодействию с новым контентом.

Основные причины:

• Событие перехода не отслеживается или событие DOMContentLoaded не вызывается повторно;
• Popup создан в глобальной области и не очищается при смене контента;
• Отсутствует обработчик для удаления popup при смене URL без перезагрузки.

Пошаговое решение: удаление popup при AJAX-навигации

1. Определите механизм AJAX-навигации на сайте

Проверьте, используется ли на сайте PJAX, TurboLinks, Barba.js или кастомное решение. Например, TurboLinks срабатывает на событие turbolinks:before-render, PJAX — pjax:end. Это критично для выбора правильного хука для удаления popup.

2. Добавьте обработчик удаления popup при смене контента

Предположим, что popup имеет класс .my-popup и открывается динамически. Вставьте следующий код в JavaScript-файл темы или плагина:

function closeMyPopup() {
  const popup = document.querySelector('.my-popup');
  if (popup) {
    popup.remove(); // удаляем элемент из DOM
  }
}

// Пример для TurboLinks
if (window.Turbolinks) {
  document.addEventListener('turbolinks:before-render', () => {
    closeMyPopup();
  });
}

// Пример для PJAX
if (window.$ && $.pjax) {
  $(document).on('pjax:end', () => {
    closeMyPopup();
  });
}

// Для кастомных AJAX-событий замените на соответствующее
// Также полезно прослушивать событие popstate
window.addEventListener('popstate', closeMyPopup);

3. Удаление обработчиков событий внутри popup

Если popup содержит свои слушатели событий, желательно их снять перед удалением, чтобы избежать утечек памяти:

function cleanupPopupEvents(popup) {
  // пример - если в popup есть кнопка закрытия
  const closeBtn = popup.querySelector('.close-btn');
  if (closeBtn) {
    closeBtn.removeEventListener('click', closePopupHandler);
  }
  // добавьте другие очистки здесь
}

function closeMyPopup() {
  const popup = document.querySelector('.my-popup');
  if (popup) {
    cleanupPopupEvents(popup);
    popup.remove();
  }
}

Проверка результата после внедрения

1. Откройте страницу с popup, вызовите его.

2. Перейдите по ссылке внутри сайта, которая грузится без полной перезагрузки.

3. Убедитесь, что popup исчезает сразу после перехода, а не остаётся на экране.

4. Проверьте консоль браузера на отсутствие JavaScript-ошибок.

Частые ошибки и как их исправить

• Не тот хук для AJAX-навигации: Используйте правильное событие. Проверьте, какой плагин/библиотека отвечает за AJAX-переходы.
• Удаление popup не работает: Проверьте, что селектор .my-popup совпадает с реальным классом/ID окна.
• Утечки памяти из-за неотключенных слушателей событий: Всегда снимайте события перед удалением DOM-элементов.
• Popup создаётся повторно при каждом переходе: Убедитесь, что логика создания popup не дублируется при каждом AJAX-загрузке.

Практические советы по производительности и безопасности

• Избегайте глобальных переменных для popup — инкапсулируйте логику внутри модуля JavaScript.
• Если используете cookie или localStorage для контроля показа popup, не забудьте очищать их при необходимости.
• Минимизируйте количество DOM-операций — удаляйте popup одним вызовом remove(), не скрывайте через CSS.
• Если popup содержит формы, валидируйте данные на сервере, даже если AJAX-отправка используется.

Сравнение подходов к удалению popup при AJAX-навигации