Универсальный frontend-модуль на базе Web Components (Custom Elements + Shadow DOM), предназначенный для бесшовного и изолированного запуска партнерских веб-приложений поверх текущей страницы хоста.
index.html- Основной сайт-клиент (хост), имитирующий реальный сайт с длинным контентом и кнопкой запуска.partner-launcher.js- Исходный код интеграционного веб-компонента.partner-app/index.html— Внешнее целевое приложение.
- Склонируйте репозиторий.
- Для корректной работы технологии postMessage проект необходимо запустить на локальном сервере. Используйте расширение Live Server в VS Code или выполните в терминале корня проекта:
npx serve .
- Откройте открывшийся адрес в браузере.
Модуль объявляет новый кастомный HTML-тег, который можно использовать как стандартный элемент в любом frontend-проекте. Достаточно подключить JS-файл и вызвать кастомный тег:
<script src="partner-launcher.js" defer></script>
<partner-launcher src="partner-app/index.html"></partner-launcher>Важное требование к внешнему приложению:
Чтобы модуль бесшовно переключил экран с лоадера на игру, а также смог корректно закрыться, ваше приложение должно отправлять в родительское окно соответствующие сообщения через postMessage (подробнее см. в разделе «Описание протокола взаимодействия»).
Обмен данными между модулем-интегратором и внешним приложением происходит асинхронно через безопасный механизм window.postMessage.
- Сигнал готовности (APP_READY) отправляется из iframe на хост-страницу, когда приложение полностью загрузило свои внутренние ресурсы и готова к показу => Модуль скрывает индикатор загрузки (loader) и плавно отображает фрейм на весь экран.
- Сигнал выхода (APP_CLOSE) отправляется из iframe при нажатии пользователем на внутреннюю кнопку «Выйти» => Модуль активирует полную очистку, удаляет элемент из DOM и возвращает исходное состояние сайту.
Для полной проверки логики и выполнения всех бизнес-требований пройдите по следующим шагам сценария:
- Откройте сайт-клиент. Убедитесь, что страница свободно скроллится вверх и вниз.
- Нажмите на кнопку «Запустить приложение».
- На экране появляется светло-серый фон перекрытия и анимированный индикатор загрузки. Само приложение в этот момент скрыто (нет белых вспышек или недогруженных элементов). Попробуйте покрутить колесико мыши или сделать свайп на мобильном устройстве. Основная страница под модулем жестко заблокирована — она не скроллится, не масштабируется жестами, а контент не «дёргается» из-за исчезновения полосы прокрутки.
- Через 1.5 секунды (имитация загрузки приложения) loader бесшовно исчезает, и партнерское приложение плавно отображается на весь экран. Теперь вы можете взаимодействовать с интерфейсом приложения.
- Нажмите на красную кнопку «Выйти» внутри фрейма: модуль полностью удаляет себя из DOM. Все инлайновые стили с body удаляются, возвращая хост-страницу к исходному CSS. Глобальные обработчики событий (wheel, touchmove, message) отписываются, исключая утечки памяти. Скролл полностью восстановлен и работает с того же места, где был прерван.