← Все статьи

Туториалы

JustZix работает на динамических (SPA) страницах без F5

18 мая 2026 · автор JustZix Team

Всё больше сайтов — это одностраничные приложения (SPA): вы кликаете, адресная строка меняется, но страница не загружается заново. JustZix раньше не замечал таких изменений — правила, привязанные к пути URL, появлялись только после F5. Этот пост объясняет, что изменилось и почему это важно.

Что такое навигация без перезагрузки

На классическом сайте каждый переход — это свежая загрузка документа. SPA вместо этого подменяет содержимое на лету и обновляет адрес через history.pushState или replaceState. Так работают, в частности, панель Google Ads, многие административные панели и современные веб-приложения.

Проблема: правила, «замороженные» на первом URL

JustZix сопоставляет правила с шаблоном URL. Поскольку скрипт на странице проверял URL только при событиях DOMContentLoaded и load, сопоставление не обновлялось после перехода внутри SPA. Плавающая кнопка, панели действий, окна на странице и внедряемый CSS появлялись или исчезали только после ручной перезагрузки страницы.

Решение: три канала обнаружения

Расширение теперь обнаруживает навигацию SPA через три канала: события popstate и hashchange и наблюдатель за изменениями документа. Все они сходятся в один дешёвый сторож, сравнивающий location.href — повторное сопоставление правил запускается только тогда, когда адрес действительно изменился, поэтому оно не нагружает страницу.

Что это даёт на практике

Правила, привязанные к конкретному пути — например только /campaigns в рекламной панели — включаются и выключаются по мере того, как вы кликаете по приложению, без F5. То же касается панелей действий и окон, привязанных к шаблону URL.

Совет: пишите устойчивые к SPA правила JS

Само расширение теперь реагирует на изменения адреса, но и ваш собственный код JS должен. Если правило изменяет элементы, которые SPA отрисовывает позже, оберните логику в MutationObserver, чтобы она работала и после подгрузки содержимого:

// Работать и после подгрузки содержимого через SPA
function applyTweak() {
  document.querySelectorAll('.widget').forEach(el => {
    el.style.outline = '2px solid #006870';
  });
}
applyTweak();
new MutationObserver(applyTweak).observe(document.body, {
  childList: true, subtree: true,
});

Выгоды

Правила работают сразу, без ручной перезагрузки. Поведение единообразно на SPA-панелях — Google Ads, административных панелях и веб-приложениях. И сопоставление по пути URL наконец-то полностью надёжно.

Готовые правила для многих сайтов есть в каталоге примеров. Установите JustZix и проверьте свои правила на любом SPA.