Как отловить изменение размера окна или поля HTML-документа в 1С

← На главную

При интеграции интерактивных веб-компонентов, таких как географические карты (Яндекс.Карты, OpenLayers, Leaflet) или специализированные графики, разработчики часто сталкиваются с необходимостью адаптировать содержимое веб-страницы под изменяющиеся габариты окна 1С. Выясним причину сложностей реализации такого поведения и разберем эффективные способы решения этой задачи.

Особенности и ограничения платформы 1С

В платформе 1С:Предприятие (как в обычном, так и в управляемом интерфейсе) отсутствует встроенное штатное событие вида ПриИзмененииРазмера для формы или ее элементов. Форма и элементы управления могут автоматически растягиваться по горизонтали и вертикали, однако перехватить сам момент ресайза стандартным обработчиком событий на встроенном языке невозможно.

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

Способ 1. Использование обработчика ожидания в 1С

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

Разберем по шагам логику реализации:

При открытии формы сохраняем начальные значения ширины и высоты элемента в переменные модуля формы.
Подключаем обработчик ожидания с интервалом в 1 секунду.
В вызванной процедуре сравниваем текущую ширину и высоту с сохраненными.
Если размеры изменились — фиксируем новые значения и вызываем процедуру перерисовки содержимого.

Посмотрим на пример кода для обычной формы (толстый клиент):


Перем ПредыдущаяШирина;
Перем ПредыдущаяВысота;

Процедура ПриОткрытии()
    ПредыдущаяШирина = ЭлементыФормы.ПолеHTMLДокумента.Ширина;
    ПредыдущаяВысота = ЭлементыФормы.ПолеHTMLДокумента.Высота;
    ПодключитьОбработчикОжидания("ПроверитьИзменениеРазмера", 1);
КонецПроцедуры

Процедура ПроверитьИзменениеРазмера() Экспорт
    ТекущаяШирина = ЭлементыФормы.ПолеHTMLДокумента.Ширина;
    ТекущаяВысота = ЭлементыФормы.ПолеHTMLДокумента.Высота;
    
    Если ТекущаяШирина <> ПредыдущаяШирина Или ТекущаяВысота <> ПредыдущаяВысота Тогда
        ПредыдущаяШирина = ТекущаяШирина;
        ПредыдущаяВысота = ТекущаяВысота;
        ПерерисоватьКарту();
    КонецЕсли;
КонецПроцедуры

Процедура ПриЗакрытии()
    ОтключитьОбработчикОжидания("ПроверитьИзменениеРазмера");
КонецПроцедуры

Обратите внимание: метод ПодключитьОбработчикОжидания имеет минимальный шаг вызова в 1 секунду. Это может вызывать заметные глазу задержки при интерактивном растягивании окна пользователем, а также создает постоянную фоновую нагрузку на клиентский поток.

Способ 2. Обработка события resize внутри HTML и JavaScript (рекомендуемый)

Поле HTML-документа представляет собой встроенный браузер. Если внутри поля отображается веб-карта, оптимальнее всего делегировать отслеживание изменений веб-движку и JavaScript, не привлекая механизмы 1С.

Рассмотрим подробнее реализацию на стороне HTML/JS:

Настройка стилей CSS: Задаем контейнеру карты и базовым тегам растягивание на 100% доступной области:
```
html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
```
Подписка на событие ресайза: В скрипте страницы подписываемся на стандартное событие окна window.addEventListener('resize', ...) или используем ResizeObserver для отслеживания изменения контейнера карты.
Вызов специализированных методов картографического API: Большинство библиотек содержат встроенные функции пересчета тайлов и вьюпорта:
1. Для Яндекс.Карт: map.container.fitToViewport()
2. Для Leaflet: map.invalidateSize()
3. Для OpenLayers: map.updateSize()

Посмотрим на пример JavaScript-кода внутри HTML-страницы:


window.addEventListener('resize', function() {
    // Вызываем пересчет геометрии в зависимости от используемого API
    if (typeof myMap !== 'undefined') {
        myMap.container.fitToViewport();
    }
});

Способ 3. Передача события изменения размера из JavaScript в 1С

Если бизнес-логика требует выполнения перерасчета данных именно на стороне платформы 1С при изменении геометрии веб-страницы, организуем передачу сигнала из браузера в код 1С.

Разберем способы взаимодействия:

Через перехват навигации: При возникновении события resize в JavaScript меняем адрес страницы на псевдо-URL, например:
```
window.location.href = "v8action://resize?w=" + window.innerWidth + "&h=" + window.innerHeight;
```
В 1С назначаем обработчик ПередПереходом (или ПриНажатии) у поля HTML-документа, анализируем входящий URL, отменяем реальный переход параметром Отказ = Истина и выполняем нужные алгоритмы 1С.
Для управляемых форм: Используем встроенный механизм ОповеститьО1С() на стороне JavaScript, что вызывает платформенное событие оповещения внутри управляемой формы 1С.

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