Связывание с историей браузера

Featherlight — лёгкая и гибкая библиотека для создания модальных окон на JavaScript. Одной из её мощных возможностей является интеграция с историей браузера, что позволяет создавать модальные окна, поведение которых учитывает навигацию пользователя. Эта функциональность особенно полезна для сложных интерфейсов, где открытие модального окна должно оставлять след в истории и позволять корректное использование кнопок «Назад» и «Вперёд».

Основы работы с историей

Featherlight предоставляет поддержку HTML5 History API через опцию hash. Использование этой опции позволяет каждому открытому модальному окну создавать уникальный идентификатор в URL. Например:

$.featherlight($('#modalContent'), {
    persist: true,
    hash: 'modal1'
});

При открытии такого окна URL браузера автоматически изменится, добавляя хэш #modal1. Это значит, что пользователь может использовать кнопку «Назад» для закрытия модального окна без полной перезагрузки страницы.

Ключевые моменты поведения:

  • Хэш появляется только при открытии модального окна.
  • Закрытие окна автоматически удаляет хэш.
  • Повторное открытие с тем же хэшем не создаёт лишних записей в истории.

Работа с несколькими окнами

Featherlight корректно обрабатывает сценарии с несколькими модальными окнами. При использовании опции hash можно задавать разные значения для каждого окна, что позволяет:

  1. Идентифицировать текущее открытое окно.
  2. Управлять последовательностью закрытия при навигации «Назад».

Пример с двумя окнами:

$('#openModal1').featherlight($('#modal1'), { hash: 'modal1' });
$('#openModal2').featherlight($('#modal2'), { hash: 'modal2' });

Если пользователь откроет сначала modal1, затем modal2, URL будет последовательно изменяться: #modal1 → #modal2. Нажатие кнопки «Назад» сначала закроет modal2, оставив modal1 активным, а второе нажатие полностью вернёт к исходному состоянию страницы.

Обработка события изменения хэша

Для сложной логики можно использовать глобальный обработчик события hashchange. Это позволяет реагировать на изменение хэша вне зависимости от действий пользователя:

$(window).on('hashchange', function() {
    const hash = location.hash.replace('#', '');
    if (!hash) {
        $.featherlight.close();
    } else {
        const modalContent = $('#' + hash);
        if (modalContent.length) {
            $.featherlight(modalContent);
        }
    }
});

В этом примере любое изменение хэша синхронизируется с модальными окнами:

  • Пустой хэш закрывает все окна.
  • Хэш, соответствующий элементу на странице, открывает его через Featherlight.

Настройка сохранения состояния

Для поддержания состояния окна при перезагрузке страницы используется опция persist. Она гарантирует, что контент модального окна не будет удалён из DOM при закрытии:

$.featherlight($('#persistentModal'), { persist: true, hash: 'persistent' });

Такой подход важен при интеграции с динамическими данными или при необходимости сохранить форму в модальном окне между открытием и закрытием.

Особенности совместимости

  1. Featherlight использует стандартный HTML5 History API, что обеспечивает работу в современных браузерах без сторонних библиотек.
  2. В старых браузерах, не поддерживающих хэши, поведение модальных окон остаётся базовым — они открываются и закрываются без интеграции с историей.
  3. Использование хэшей не влияет на серверную навигацию, так как изменения URL после # не отправляются на сервер.

Принципы проектирования интерфейса с историей

  • Каждое модальное окно должно иметь уникальный хэш для корректной навигации.
  • Не рекомендуется использовать динамические хэши без контроля, чтобы избежать конфликта URL с основной навигацией сайта.
  • Событие hashchange позволяет реализовать сложные сценарии, например, восстановление состояния интерфейса при прямом переходе по ссылке с хэшем.

Совместное использование с другими опциями Featherlight

Опция hash совместима с большинством других настроек:

  • afterOpen и afterClose позволяют выполнять дополнительные действия при открытии и закрытии окна.
  • persist сохраняет DOM-содержимое.
  • variant может использоваться для разных визуальных стилей модальных окон с одним и тем же хэшем.
$.featherlight($('#modalExample'), {
    hash: 'example',
    variant: 'large',
    persist: true,
    afterOpen: function() { console.log('Окно открыто'); },
    afterClose: function() { console.log('Окно закрыто'); }
});

Такой подход обеспечивает полное управление поведением модальных окон, включая интеграцию с историей браузера, визуальное оформление и управление жизненным циклом контента.

Оглавление