Работа с полем HTML-документа в 1С:Предприятии часто превращается в "черный ящик" для разработчика. Мы пишем код на JavaScript, подключаем библиотеки для построения графиков или карт (например, Leaflet), но сталкиваемся с тем, что в обычном браузере всё работает идеально, а внутри 1С скрипты ведут себя непредсказуемо или не исполняются вовсе. В этой статье мы подробно разберем, как заглянуть "под капот" этого механизма, какие инструменты отладки нам доступны и как адаптировать веб-технологии под специфику платформы.
Первым делом нам необходимо выяснить, какой именно браузерный движок (компилятор JS) использует ваша версия платформы. Исторически сложилось, что до версии 8.3.14 1С использовала движок Internet Explorer (MSHTML). Это накладывало огромные ограничения на использование современного синтаксиса ES6+.
Начиная с версии 8.3.14.1565 и выше (включая актуальные 8.3.17, 8.3.23 и т.д.), 1С перешла на использование библиотеки WebKit. Проанализируем строку User-Agent, которую выдает платформа: в ней часто фигурирует AppleWebKit и специфическая пометка V8WebKit. Это означает, что наиболее близким по поведению браузером будет Safari, а не Chrome, как принято считать. Хотя Chrome также вырос из WebKit (движок Blink), внутренняя реализация в 1С имеет свои особенности, связанные с безопасностью и доступом к локальной файловой системе.
Многие программисты 1С годами используют Сообщить() или alert() для отладки, не подозревая, что внутри платформы скрыт полноценный инспектор кода. Рассмотрим, как его активировать:
После этого откроется отдельное окно встроенного инспектора WebKit. Проанализируем его возможности: здесь доступны вкладка Elements (для правки стилей и структуры DOM в реальном времени), Console (для просмотра ошибок JS и выполнения команд) и Sources (для установки точек остановки в скриптах). Если комбинация клавиш не срабатывает с первого раза, попробуйте нажать её дважды или убедитесь, что фокус находится именно внутри веб-содержимого.
Часто при использовании карт Leaflet разработчики жалуются на "кривое" отображение или отсутствие маркеров. Выясним причину: когда 1С загружает HTML из строки, она создает временный файл в глубоко вложенных директориях ОС. Относительные пути к CSS-файлам или картинкам (например, src="js/leaflet.js") перестают работать, так как базовый путь файла оказывается неопределенным.
Разберем самый надежный метод решения этой проблемы — Inlining (внедрение). Вместо ссылок на внешние файлы, мы должны поместить всё содержимое библиотек прямо в текст HTML-документа.
Посмотрим на пример того, как подготовить данные в 1С:
Функция СформироватьHTML(ТекстСкрипта, ТекстСтилей) Экспорт
Результат = "
|<html>
|<head>
|<style>" + ТекстСтилей + "</style>
|<script>" + ТекстСкрипта + "</script>
|</head>
|<body>
| <div id='map' style='width: 100%; height: 100%;'></div>
|</body>
|</html>";
Возврат Результат;
КонецФункции
Для корректного отображения иконок Leaflet рекомендуется переводить изображения маркеров в формат Base64 и прописывать их прямо в JS-коде инициализации карты. Это избавит вас от ошибок 404 в консоли отладчика.
Если штатный инспектор по каким-то причинам недоступен (например, в мобильном клиенте или специфической сборке), мы можем воспользоваться программным методом. Существует библиотека Eruda, которая представляет собой "консоль внутри страницы".
Рассмотрим, как её подключить:
eruda.js.eruda.init();.В углу поля HTML появится иконка шестеренки, при нажатии на которую откроется полноценная панель разработчика прямо внутри интерфейса 1С. Это незаменимый инструмент для отладки в условиях, когда системные горячие клавиши заблокированы.
Иногда нам нужно вывести значение переменной из JavaScript непосредственно в табло отладки конфигуратора 1С. Для этого проанализируем механизм взаимодействия через изменение window.location. Мы можем использовать произвольную схему протокола, которую перехватим в 1С.
Пример JS-кода для отправки данных:
function debugTo1C(data) {
window.location.href = "v8://debug?value=" + encodeURIComponent(JSON.stringify(data));
}
В самой 1С для поля HTML-документа необходимо создать обработчик события ПриНажатии (или ПриИзмененииСодержимого, в зависимости от версии):
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
URL = ДанныеСобытия.Event.target.href; // Или анализ window.location
Если Найти(URL, "v8://debug") > 0 Тогда
СтандартнаяОбработка = Ложь;
ПараметрыСтрокой = Сред(URL, Найти(URL, "value=") + 6);
Сообщить("Данные из JS: " + ПараметрыСтрокой);
КонецЕсли;
КонецПроцедуры
Важный момент: Современный WebKit в 1С очень строго относится к политике безопасности CORS. Если ваш HTML пытается сделать fetch или XMLHttpRequest к внешнему API, а страница загружена просто как текст, запрос может быть заблокирован. Всегда проверяйте вкладку Network в инспекторе (Ctrl+Shift+Alt+F12), чтобы увидеть статус сетевых запросов.
Подводя итог, можно сказать, что разработка для поля HTML-документа требует совмещения навыков веб-мастера и программиста 1С. Использование встроенного инспектора и отказ от внешних ссылок в пользу внедренных ресурсов (Inlining) решают 90% проблем, возникающих при работе с библиотеками типа Leaflet.