Использование HTML и JavaScript внутри управляемых форм 1С открывает огромные возможности для создания современных и динамичных интерфейсов. Мы можем отрисовать красивые меню, интерактивные карты или сложные графики, которые стандартными средствами платформы реализовать затруднительно. Однако при реализации таких решений часто возникает вопрос: как правильно передать данные из 1С в JavaScript и вызвать нужную функцию? В этой статье мы подробно разберем, как наладить это взаимодействие на примере создания динамического меню.
Для начала проанализируем, как разместить HTML на управляемой форме. В отличие от обычных форм, где использовался метод УстановитьТекст(), в управляемом приложении работа строится через данные. Разберем по шагам:
ТекстHTML и типом Строка (длина неограничена).Поле HTML документа.Теперь любое изменение значения реквизита ТекстHTML будет приводить к обновлению содержимого поля на форме. Это фундаментальное отличие управляемых форм: мы меняем данные реквизита, а платформа сама обновляет отображение.
Рассмотрим структуру HTML-документа, который мы будем помещать в наш реквизит. Нам важно не только отрисовать контейнер для кнопок, но и подготовить функцию JavaScript, которую мы будем вызывать из 1С. Выясним причину, почему важно правильно подготовить заголовок документа: для корректной работы в среде Windows (которая использует движок IE для 1С до версии 8.3.14) необходимо указать режим совместимости.
Пример формирования текста HTML в 1С:
Текст = "
|<HTML>
|<head>
| <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />
|</head>
|<BODY style='background-color:#FCFAEB' scroll='no'>
| <div id='container'></div>
| <script type=""text/javascript"">
| function createButtons(jsonString) {
| var buttonsArray = JSON.parse(jsonString);
| var container = document.getElementById('container');
| container.innerHTML = ''; // Очистим перед отрисовкой
|
| buttonsArray.forEach(function(item) {
| var btn = document.createElement('div');
| btn.id = item.Name;
| btn.innerText = item.Caption;
| btn.style.fontSize = item.FontSize + 'px';
| btn.style.padding = '10px';
| btn.style.cursor = 'pointer';
| btn.onclick = function() {
| window.location.href = 'v8action:click?' + item.Name;
| };
| container.appendChild(btn);
| });
| }
| </script>
|</BODY>
|</HTML>";
Объект.ТекстHTML = Текст;
Проанализируем ситуацию с передачей объектов 1С напрямую в JavaScript. Хотя технически в некоторых случаях можно пробросить Массив или Структуру как COM-объекты, это часто приводит к ошибкам типов и нестабильной работе скриптов. Рекомендуемый подход — использование JSON. Для работы с данными в таком формате можно воспользоваться инструментом для валидации и форматирования JSON.
Посмотрим на пример подготовки данных в 1С:
МассивКнопок = Новый Массив;
Кнопка1 = Новый Структура;
Кнопка1.Вставить("Name", "btnSales");
Кнопка1.Вставить("Caption", "Продажи");
Кнопка1.Вставить("FontSize", 14);
МассивКнопок.Добавить(Кнопка1);
Кнопка2 = Новый Структура;
Кнопка2.Вставить("Name", "btnPurchases");
Кнопка2.Вставить("Caption", "Закупки");
Кнопка2.Вставить("FontSize", 14);
МассивКнопок.Добавить(Кнопка2);
// Преобразуем в строку JSON
ЗаписьJSON = Новый ЗаписьJSON;
ЗаписьJSON.УстановитьСтроку();
ЗаписатьJSON(ЗаписьJSON, МассивКнопок);
СтрокаJSON = ЗаписьJSON.Закрыть();
Теперь разберем самый ответственный момент — как заставить JavaScript выполнить функцию createButtons с нашими данными. В зависимости от версии платформы есть два способа.
Способ 1. Для платформы ниже 8.3.14 (через COM-объект Документ):
В этом случае мы обращаемся к свойству parentWindow (или defaultView) документа. Обратите внимание, что вызов должен происходить только после того, как документ полностью загрузился.
// Элементы.ПолеHTML — это имя элемента на форме
ДокументHTML = Элементы.ПолеHTML.Документ;
Если ДокументHTML <> Неопределено Тогда
ДокументHTML.parentWindow.createButtons(СтрокаJSON);
КонецЕсли;
Способ 2. Универсальный (метод ВыполнитьJavaScript):
В современных версиях платформы (8.3.14+) появился встроенный метод ВыполнитьJavaScript(), который работает гораздо стабильнее и поддерживает кроссплатформенность.
Скрипт = "createButtons('" + СтрокаJSON + "')";
Элементы.ПолеHTML.ВыполнитьJavaScript(Скрипт);
Чтобы наше меню не просто красиво выглядело, но и работало, нам нужно передать информацию о нажатии кнопки обратно в 1С. Для этого в JS мы использовали изменение window.location.href с префиксом. В 1С нам нужно создать обработчик события ПриНажатии для поля HTML-документа.
&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// ДанныеСобытия.Href вернет что-то вроде "v8action:click?btnSales"
Если Найти(ДанныеСобытия.Href, "v8action:click?") > 0 Тогда
СтандартнаяОбработка = Ложь; // Отменяем переход по ссылке
ИмяКоманды = Сред(ДанныеСобытия.Href, СтрДлина("v8action:click?") + 1);
ВыполнитьКомандуМеню(ИмяКоманды);
КонецЕсли;
КонецПроцедуры
Рассмотрим подробнее несколько нюансов, которые помогут избежать ошибок:
ТекстHTML. Документ еще не успеет инициализироваться. Лучше всего использовать событие элемента формы ДокументСформирован.ВыполнитьJavaScript следите за тем, чтобы внутри JSON-строки не было одинарных кавычек, которые могут "разорвать" скрипт.Таким образом, мы проанализировали полный цикл создания динамического интерфейса. Сочетание ЗаписьJSON для передачи данных и ВыполнитьJavaScript для вызова функций позволяет создавать производительные и визуально привлекательные решения в среде управляемых форм. При необходимости создать динамический интерфейс средствами платформы можно воспользоваться обработкой с примером динамического добавления и удаления элементов формы.