При разработке интерфейсов на платформе 1С:Предприятие 8 часто возникает необходимость использования Поля HTML документа для отображения сложной графики, интерактивных карт или кастомных элементов управления. Однако основной трудностью становится «обратная связь»: как заставить 1С отреагировать на действия пользователя внутри этого поля и, что более важно, как передать данные из JavaScript обратно в код 1С. В этой статье мы подробно разберем, как наладить это взаимодействие, учитывая особенности мобильной платформы и различных движков рендеринга. Для построения подобных сложных интерфейсов можно использовать интерактивный HTML-дашборд для 1С.
Рассмотрим стандартную ситуацию: мы разместили на форме Поле HTML документа и создали для него обработчик ПриНажатии. В теории, любое нажатие на элемент внутри HTML должно вызывать это событие. На практике же разработчики часто сталкиваются с тем, что событие не срабатывает. Выясним причину этого поведения.
Во-первых, поведение поля сильно зависит от версии платформы и операционной системы. В старых версиях Windows использовался движок Internet Explorer, в новых (начиная с 8.3.14) — Chromium. На мобильных устройствах 1С использует системные компоненты: WebView на Android и WebKit на iOS. Проанализируем ситуацию: мобильная платформа ведет себя аналогично веб-клиенту, где прямой доступ к DOM (Document Object Model) из встроенного языка 1С ограничен или отсутствует по соображениям безопасности.
Это штатный метод, который работает в современных релизах платформы (начиная с 8.3.9). Суть метода заключается в том, что 1С умеет перехватывать результат выполнения JavaScript-функции, привязанной к событию клика.
Разберем по шагам реализацию этого метода. Сначала подготовим HTML-код. Нам нужно, чтобы при нажатии на кнопку вызывалась функция, возвращающая значение:
<html>
<head>
<script type="text/javascript">
function WebClientClick() {
// Здесь может быть любая логика сбора данных из полей ввода HTML
return "Данные из HTML: " + document.getElementById('myInput').value;
}
</script>
</head>
<body>
<input type="text" id="myInput" value="Привет, 1С!">
<button onclick="return WebClientClick();">Отправить в 1С</button>
</body>
</html>
Обратим внимание на критически важный момент: в атрибуте onclick обязательно должно присутствовать ключевое слово return. Если его не указать, 1С не получит возвращаемое значение функции.
Теперь настроим обработчик на стороне 1С. В модуле управляемой формы создадим процедуру для события ПриНажатии нашего поля:
&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// Параметр ДанныеСобытия является фиксированной структурой
// В зависимости от типа элемента, результат выполнения JS попадает сюда
Если ДанныеСобытия <> Неопределено Тогда
// В некоторых версиях платформы результат находится напрямую в структуре
Сообщить("Получены данные: " + ДанныеСобытия);
КонецЕсли;
КонецПроцедуры
Если первый способ не срабатывает (что часто бывает на специфических сборках Android или в старых версиях платформы), воспользуемся методом, который считается самым надежным среди опытных разработчиков 1С. Мы будем имитировать переход по гиперссылке, который 1С гарантированно перехватывает.
Проанализируем ситуацию: любое изменение window.location.href вызывает в 1С событие ПередПереходом (или OnNavigation). Мы можем использовать кастомный протокол, чтобы 1С поняла, что это не настоящий переход на сайт, а передача данных.
Рассмотрим пример JavaScript-кода внутри HTML:
function SendTo1C(data) {
// Формируем строку с данными. Можно использовать JSON.
var serializedData = encodeURIComponent(JSON.stringify(data));
window.location.href = "v8action://sendData?payload=" + serializedData;
}
Теперь в 1С нам нужно обработать событие ПередПереходом:
&НаКлиенте
Процедура ПолеHTMLПередПереходом(Элемент, URL, СтандартнаяОбработка)
// Проверяем, наш ли это протокол
Если Найти(URL, "v8action://") > 0 Тогда
// Отменяем стандартный переход браузера по ссылке
СтандартнаяОбработка = Ложь;
// Извлекаем данные из строки URL
// В данном примере нужно распарсить строку после "payload="
ПозицияДанных = Найти(URL, "payload=");
Если ПозицияДанных > 0 Тогда
СтрокаJSON = Сред(URL, ПозицияДанных + 8);
// Обрабатываем полученные данные
ОбработатьДанныеИзHTML(СтрокаJSON);
КонецЕсли;
КонецЕсли;
КонецПроцедуры
Этот метод особенно хорош для мобильной платформы, так как механизм навигации — это базовая функция любого WebView, и она работает максимально стабильно.
Поскольку через параметры событий часто можно передать только строковые значения, стандартной практикой стала сериализация данных. Если вам нужно передать из HTML сложный объект (например, массив товаров или структуру настроек), выполним следующие шаги:
JSON.stringify(myObject).Посмотрим на пример кода в 1С для обработки такой строки:
&НаКлиенте
Процедура ОбработатьДанныеИзHTML(СтрокаJSON)
ЧтениеJSON = Новый ЧтениеJSON;
ЧтениеJSON.УстановитьСтроку(СтрокаJSON);
Данные = ПрочитатьJSON(ЧтениеJSON);
ЧтениеJSON.Закрыть();
// Теперь переменная "Данные" — это Структура или Массив в 1С
Если ТипЗнч(Данные) = Тип("Структура") Тогда
Сообщить("Успешно получен объект из HTML");
КонецЕсли;
КонецПроцедуры
Выясним причину, по которой может не работать отлов событий с произвольных сайтов (например, если вы открываете в поле HTML страницу поисковика или стороннего сервиса). Здесь вступает в силу Политика одного источника (Same-Origin Policy).
Проанализируем ситуацию: браузер (и поле HTML документа) блокирует попытки внедрения скриптов или перехвата событий с другого домена в целях безопасности. Если вам нужно отловить нажатие кнопки на чужом сайте, у вас есть два пути:
ДокументСформирован) можно попытаться внедрить свой JS-код через метод УстановитьТекст(), если вы предварительно скачали содержимое страницы программно через HTTPСоединение.Элементы.ПолеHTML.ВыполнитьScript("ваша_функция()"), чтобы принудительно вызывать код в контексте загруженной страницы и получить результат.Для реализации стабильного взаимодействия между 1С и HTML-полем мы рекомендуем придерживаться следующих правил:
return ВашаФункция() в JS и параметр ДанныеСобытия в 1С.window.location.href и обработкой в ПередПереходом.ДокументСформирован.Рассмотренные подходы позволяют превратить статичное поле вывода информации в мощный инструмент двусторонней связи, позволяя создавать современные и удобные интерфейсы внутри экосистемы 1С. В качестве примера такой реализации можно использовать минималистичный редактор кода для поля HTML документа.