Как отловить нажатие кнопки в HTML-поле в мобильном приложении 1С

← На главную

Разработка мобильных приложений на платформе 1С:Предприятие часто требует создания кастомных интерфейсов с использованием HTML и CSS. Это позволяет добиться визуальной гибкости, которой сложно достичь стандартными средствами управляемых форм. Однако разработчики часто сталкиваются с проблемой: события, которые идеально работают в тонком или веб-клиенте (например, нажатие на обычную кнопку button), совершенно не реагируют на действия пользователя в мобильном клиенте или мобильной платформе. В этой статье мы подробно разберем, почему так происходит, и какими способами можно гарантированно отловить взаимодействие пользователя с HTML-контентом. В качестве практического примера реализации подобного подхода можно рассмотреть мобильное приложение для учета личных финансов с HTML-интерфейсом.

Выясним причину: почему стандартные события не работают?

Для начала проанализируем ситуацию с технической точки зрения. В десктопном «Тонком клиенте» под Windows Поле HTML документа использует движок Internet Explorer (MSHTML). В этой среде платформа 1С имеет глубокую интеграцию с объектной моделью документа (DOM), что позволяет ей транслировать объекты Event, Element и другие напрямую во встроенный язык.

Ситуация кардинально меняется при переходе на мобильную платформу. Здесь используются нативные движки мобильных браузеров: WebKit на iOS и Blink/WebView на Android. В мобильной реализации 1С «мост» между JavaScript-движком и встроенным языком 1С ограничен по соображениям производительности и безопасности. Согласно официальной документации и практике разработки, на мобильной платформе для объекта ДанныеСобытия свойства Anchor, Element, Button и Event всегда будут иметь значение Неопределено. Единственные доступные нам данные — это Document (в виде внешнего объекта) и Href (строка адреса перехода).

Решение №1: Перехват через параметр Href (Метод «Ложной навигации»)

Поскольку свойство Href — это практически единственный надежный канал передачи данных из HTML в 1С на мобильных устройствах, мы можем использовать механизм программного изменения адреса страницы. Рассмотрим, как это реализовать.

Вместо использования стандартных кнопок типа submit или сложных обработчиков событий, мы создадим элемент, который при нажатии инициирует переход по специальной ссылке. Проанализируем пример HTML-кода для такой кнопки:


<style>
    .my-button {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: white;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
    }
</style>

<a href="v8action://click?button=commit&user=admin" class="my-button">Отправить данные</a>

Обратите внимание на формат ссылки в атрибуте href. Мы используем произвольный префикс v8action://. Это не настоящий протокол, но он послужит нам маркером в коде 1С. Теперь разберем по шагам, как обработать это нажатие в модуле формы 1С:


&НаКлиенте
Процедура htmlТабличныйДокументПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    
    // Проверяем, содержит ли ссылка наш секретный префикс
    Если Найти(ДанныеСобытия.Href, "v8action://") > 0 Тогда
        
        // Останавливаем стандартную попытку браузера перейти по ссылке
        СтандартнаяОбработка = Ложь;
        
        // Извлекаем параметры из строки Href
        СтрокаПараметров = СтрЗаменить(ДанныеСобытия.Href, "v8action://click?", "");
        
        // Далее выполняем логику в зависимости от переданных параметров
        Если Найти(СтрокаПараметров, "button=commit") > 0 Тогда
            ОтработатьНажатиеКнопкиСохранения();
        КонецЕсли;
        
    КонецЕсли;
    
КонецПроцедуры

Решение №2: Использование JavaScript для динамической передачи данных

Иногда нам нужно не просто нажать на ссылку, а передать данные из полей ввода HTML. Использовать обычные формы <form> не рекомендуется, так как они могут вызвать перезагрузку страницы или «белый экран». Вместо этого мы можем использовать JavaScript для формирования ссылки на лету.

Рассмотрим следующий пример HTML:


<input type="text" id="smsCode" placeholder="Введите код из СМС">
<button onclick="sendTo1C()">Подтвердить</button>

<script>
function sendTo1C() {
    var code = document.getElementById('smsCode').value;
    // Мы программно меняем location.href, что вызывает событие ПриНажатии в 1С
    window.location.href = "v8action://auth?code=" + code;
}
</script>

В коде 1С мы точно так же перехватываем ДанныеСобытия.Href, парсим значение code и выполняем аутентификацию. Этот метод гораздо стабильнее, чем попытки прямого обращения к Document.getElementById из кода 1С, так как мобильная платформа не всегда корректно отдает содержимое элементов через объект Document.

Решение №3: Современный подход через ОповещениеИзJavaScript

В более свежих версиях мобильной платформы 1С появился специализированный механизм взаимодействия. Если ваша версия платформы позволяет, рекомендуется использовать метод window.external.notification(). Это «чистый» способ передачи сообщений без использования механизмов навигации браузера.

В JavaScript вызов будет выглядеть так:


function notifyPlatform(buttonName) {
    window.external.notification(buttonName);
}

В 1С для Поля HTML документа необходимо назначить обработчик события ОповещениеИзJavaScript. Проанализируем пример обработки:


&НаКлиенте
Процедура ПолеHTMLОповещениеИзJavaScript(Элемент, Сообщение)
    
    Если Сообщение = "commit" Тогда
        // Выполняем действие
    КонецЕсли;
    
КонецПроцедуры

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

Оптимизация для мобильных устройств: Touch vs Click

Разберем важный нюанс мобильной разработки. На мобильных устройствах стандартное событие onclick в HTML может срабатывать с задержкой около 300 мс. Это время браузер тратит на ожидание возможного второго клика (double tap) для масштабирования. Чтобы интерфейс вашего приложения ощущался «мгновенным», мы рекомендуем использовать событие touchend вместо onclick.

Пример оптимизированной кнопки:


<div ontouchend="window.location.href='v8action://fastclick'" style="padding: 20px; background: #eee;">
    Нажми меня быстро
</div>

Подведем итоги и рекомендации

Проанализировав особенности работы мобильной платформы 1С с HTML, можно составить следующий алгоритм действий для надежной разработки:

Забудьте про ДанныеСобытия.Event. На мобильных устройствах это свойство всегда будет пустым. Не тратьте время на отладку того, что не реализовано на уровне платформы.
Используйте ссылки для кнопок. Стилизуйте теги <a> под кнопки с помощью CSS. Это самый простой и надежный способ пробросить клик в 1С через Href.
Парсите Href в 1С. Используйте строковые функции СтрЗаменить, СтрРазделить или Найти для извлечения параметров из ссылки.
Отменяйте стандартную обработку. Всегда устанавливайте СтандартнаяОбработка = Ложь в процедуре ПриНажатии, если вы обрабатываете свою «псевдо-ссылку», иначе браузер может попытаться перейти на несуществующую страницу.
Используйте обратную связь. Если после нажатия кнопки в 1С вам нужно изменить что-то в самом HTML (например, показать текст ошибки), используйте метод Элементы.ВашеПолеHTML.ИсполнитьJavaScript("showError('Неверный код')").

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