Переход платформы 1С с Internet Explorer на WebKit: новые возможности, особенности разработки и решение типичных проблем

← На главную

Перевод клиентских приложений «1С:Предприятие» для Windows на использование движка WebKit (начиная с релиза платформы 8.3.14.1565) стал одним из самых ожидаемых и революционных изменений для разработчиков. До этого момента поле HTML-документа на операционной системе Windows базировалось на устаревшем движке MSHTML (Internet Explorer). Это накладывало жесткие ограничения на использование современных веб-стандартов, не позволяло полноценно задействовать библиотеки интерактивной визуализации и усложняло кроссплатформенную разработку.

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

Почему именно WebKit, а не Chromium?

При подготовке этого масштабного перехода разработчики фирмы «1С» детально анализировали альтернативные варианты, в частности — популярный движок Chromium (Blink). Однако выбор был сделан в пользу WebKit по ряду веских причин:

Единство кодовой базы на всех ОС. На операционных системах Linux платформа 1С уже использовала библиотеку WebKitGTK+, а на macOS — стандартную библиотеку Cocoa на базе WebKit. Перевод Windows-клиента на WebKit позволил разработчикам платформы объединить около 95% кода, отвечающего за рендеринг и обработку HTML. Это минимизировало разницу в поведении форм на разных операционных системах.
Архитектурная чистота. В отличие от Chromium, который требует сложной многопроцессной архитектуры и использует JS-движок V8, WebKit отлично интегрируется в однопоточную модель отображения окон операционной системы Windows через порты AppleWin и WinCairo. Разработчики платформы адаптировали эти библиотеки, сохранив поддержку даже старых операционных систем.

Кардинальное изменение объектной модели: от COMОбъект к ВнешнийОбъект

Самое важное изменение, которое напрямую затронуло существенные наработки программистов 1С, — это смена типов объектов при обращении к HTML-документу. Обратите внимание: если раньше свойство Документ у элемента формы ПолеHTMLДокумента на Windows возвращало стандартный COMОбъект библиотеки MSHTML, то теперь оно возвращает кроссплатформенный ВнешнийОбъект.

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


// Старый нерабочий метод (вызывал ошибку после перехода на WebKit)
Документ = Элементы.ПолеБраузера.Document;
Документ.designMode = "On";
Документ.write(ТекстМакета);    
Документ.designMode = "Off";

В новой парадигме прямое обращение к методам COM-объекта невозможно. Теперь для взаимодействия со страницей необходимо использовать штатные методы работы с объектной моделью документа (DOM) или выполнять JavaScript-код непосредственно внутри контекста страницы.

Чтобы выполнить произвольный JS-код или передать данные из 1С в WebKit, мы должны использовать метод ВыполнитьСкрипт(). Давайте посмотрим, как теперь выглядит правильная инициализация и передача данных:


&НаКлиенте
Процедура ИнициализироватьКарту(ТекстHTML)
    // Устанавливаем текст HTML-документа напрямую в реквизит, связанный с полем
    Объект.ПолеHTML = ТекстHTML;
КонецПроцедуры

&НаКлиенте
Процедура ПередатьДанныеВJS(ИмяФункции, ПараметрыЗапроса)
    // Выполняем скрипт внутри контекста WebKit
    ВыражениеJS = ИмяФункции + "(" + ПараметрыЗапроса + ");";
    Элементы.ПолеHTML.ВыполнитьСкрипт(ВыражениеJS);
КонецПроцедуры

Интеграция современных JS-фреймворков и библиотек визуализации

Отказ от Internet Explorer открыл разработчикам 1С доступ к передовым технологиям веб-разработки. Теперь внутри формы 1С можно без проблем запускать сложные реактивные интерфейсы на React или Vue.js, строить интерактивные трехмерные графики с помощью D3.js или выводить карты высокой четкости.

Выясним, как организовать архитектуру обмена данными между формой 1С и веб-страницей. Существует два основных подхода:

Использование HTTP-сервисов внутри самой базы 1С. Это наиболее красивое и масштабируемое решение. Вы можете поднять в вашей информационной базе легковесный HTTP-сервис, который будет отдавать данные в формате JSON. JavaScript внутри ПоляHTMLДокумента будет стандартным методом fetch() обращаться к этому адресу, получать актуальные данные и перерисовывать интерфейс (например, диаграмму Ганта или интерактивную карту склада) на лету без перезагрузки всей страницы.
Прямой вызов процедур 1С из JavaScript. Для передачи событий из веб-интерфейса обратно в платформу используется предопределенный механизм. В JS-коде страницы мы можем использовать объект обратного вызова. Платформа сопоставляет его с событием ПриНажатии или специализированными обработчиками событий поля.

Рассмотрим пример реализации обмена. Мы можем передать массив данных из 1С в JS, предварительно преобразовав его в строку JSON:


&НаКлиенте
Процедура ОбновитьДиаграммуНаФорме()
    ДанныеДляГрафика = ПолучитьДанныеДляВизуализации(); // Возвращает Массив Структур
    ЗаписьJSON = Новый ЗаписьJSON;
    ЗаписьJSON.УстановитьСтроку();
    ЗаписатьJSON(ЗаписьJSON, ДанныеДляГрафика);
    СтрокаДанных = ЗаписьJSON.Закрыть();
    
    // Вызываем JS-функцию обновления графика, передавая JSON-строку
    Скрипт = "updateChart(" + СтрокаДанных + ");";
    Элементы.ПолеHTMLДиаграммы.ВыполнитьСкрипт(Скрипт);
КонецПроцедуры

WebInspector: мощный инструмент отладки веб-содержимого

Одним из самых больших кошмаров разработчиков при работе со старым движком IE была отладка скриптов. Ошибки сценария часто приводили к неинформативным окнам предупреждений платформы, а найти место сбоя в JS-коде было практически невозможно.

С переходом на WebKit у нас появилась полноценная панель инструментов разработчика — WebInspector (аналог Chrome DevTools). Рассмотрим, как ей воспользоваться:

Запустите «1С:Предприятие» в режиме тонкого или толстого клиента.
Откройте форму, содержащую ПолеHTMLДокумента.
Активируйте поле кликом мыши и нажмите на клавиатуре комбинацию клавиш Ctrl + Alt + Shift + F12.
Перед вами откроется полноценная панель отладки, в которой вы сможете исследовать дерево DOM, просматривать примененные CSS-стили, анализировать сетевые запросы во вкладке Network и выполнять команды в JS-консоли.

Этот инструмент позволяет существенно сократить время на разработку сложных визуальных интерфейсов, позволяя ставить точки останова (breakpoints) прямо в коде JavaScript внутри 1С.

Анализ специфических багов и способы их обхода

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

Проблема со скроллингом и перетаскиванием (Drag-and-Drop) на картах

Многие разработчики столкнулись с неприятным эффектом при интеграции Яндекс.Карт или Google Maps: интерактивная карта отлично отрисовывается, реагирует на кнопки масштабирования и колесико мыши, но при этом ее невозможно передвигать (перетаскивать) зажатой левой кнопкой мыши. Карта ведет себя как статичная картинка.

Выясним причину этого поведения. Платформа 1С перехватывает системные события мыши для управления собственными элементами формы. При зажатии мыши на поле HTML-документа событие «перетаскивания» не транслируется корректно внутрь контейнера WebKit.

Решение проблемы: Для обхода этого ограничения необходимо явно инициализировать карту с поддержкой сенсорных событий или принудительно обрабатывать события мыши на уровне JavaScript самой страницы, переопределяя поведение по умолчанию (preventDefault) для событий mousedown, mousemove и mouseup, чтобы платформа не блокировала стандартное поведение браузера.

Проблемы с фокусом и копированием при использовании iframe (например, в TinyMCE)

Если вы встраиваете в форму 1С сложные визуальные текстовые редакторы, работающие через элементы iframe, вы можете столкнуться с тем, что стандартные сочетания клавиш копирования и вставки (Ctrl+C / Ctrl+V) перестают работать внутри редактора.

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

Проблема загрузки внешних CSS-стилей

В некоторых релизах платформы (особенно на ранних этапах внедрения WebKit) наблюдался баг, при котором внешние JS-файлы загружались без проблем, а вот внешние файлы стилей через тег <link rel="stylesheet" href="..."> полностью игнорировались движком.

Решение проблемы: Чтобы обойти этот баг и гарантировать корректное отображение интерфейса на любых релизах платформы, внедряйте CSS-стили непосредственно в тело HTML-документа с помощью тега <style> или динамически считывайте файлы стилей в 1С и передавайте их в виде текста страницы.