Как организовать взаимодействие мобильного приложения 1С с веб-сайтом через Поле HTML документа?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

При разработке мобильных приложений на платформе 1С:Предприятие часто возникает задача интеграции существующего веб-контента (например, каталога интернет-магазина на Bitrix) в интерфейс 1С. Основная сложность заключается в том, чтобы не просто отобразить страницу, но и получить обратную связь от действий пользователя: узнать, какой товар он выбрал, на какую кнопку нажал или какие данные ввел в форму. В этой статье мы подробно разберем, как наладить «общение» между JavaScript на стороне сайта и кодом 1С на стороне мобильного приложения.

Постановка задачи и ограничения мобильной платформы

Представим ситуацию: в форме мобильного приложения размещено Поле HTML документа, в котором открыт сайт. Пользователь нажимает кнопку «Добавить в корзину» на веб-странице. Нам нужно, чтобы это действие инициировало создание записи или выполнение процедуры в самой базе 1С. Проблема в том, что стандартные события браузера не всегда напрямую транслируются в события платформы 1С, особенно в мобильной версии, где функционал ДанныеСобытия может быть существенно урезан по сравнению с десктопным клиентом.

Метод 1: Перехват через фиктивные ссылки (Метод href)

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

Шаг 1: Подготовка на стороне сайта (JavaScript)

Вместо стандартной отправки формы или обычного перехода, мы привязываем к кнопке функцию, которая меняет location.href. Рассмотрим пример:


// Функция на стороне сайта (JS)
function addToCart(productId) {
    // Формируем фиктивную ссылку с префиксом и ID товара
    window.location.href = "myscheme://add_to_cart?id=" + productId;
}

Шаг 2: Обработка в 1С

В форме 1С для элемента Поле HTML документа необходимо создать обработчик события ПриНажатии. Проанализируем, как это реализовать:


&НаКлиенте
Процедура КаталогПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    
    // Получаем адрес, по которому пытался перейти браузер
    URLПерехода = ДанныеСобытия.href;
    
    // Проверяем, является ли это нашей "командой"
    Если Найти(URLПерехода, "myscheme://add_to_cart") > 0 Тогда
        
        // Отменяем стандартный переход в браузере, чтобы не открылась пустая страница
        СтандартнаяОбработка = Ложь;
        
        // Извлекаем ID товара (например, все что после "=")
        ПозицияID = Найти(URLПерехода, "id=");
        ИдентификаторТовара = Сред(URLПерехода, ПозицияID + 3);
        
        // Вызываем процедуру 1С для обработки данных
        ДобавитьТоварВКорзинуНаСтороне1С(ИдентификаторТовара);
        
    КонецЕсли;

КонецПроцедуры

Метод 2: Использование скрытого элемента-посредника (DOM-инъекция)

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

Принцип работы:

  1. JavaScript на сайте записывает нужные данные в скрытый тег (например, <div id="hidden_data">).
  2. 1С при возникновении события клика обращается к объектной модели документа (DOM) и считывает содержимое этого тега.

Рассмотрим пример реализации. Код на стороне сайта:


function sendDataTo1C(message) {
    var helper = document.getElementById("1c_bridge");
    if (!helper) {
        // Если элемента нет, создаем его
        helper = document.createElement("div");
        helper.id = "1c_bridge";
        helper.style.display = "none";
        document.body.appendChild(helper);
    }
    helper.textContent = message;
    // Генерируем клик по ссылке, чтобы сработало событие в 1С
    window.location.href = "#trigger";
}

Код в 1С для считывания данных из этого элемента:


&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    
    #Если МобильноеПриложениеКлиент Тогда
        // Обращаемся к DOM документу через ДанныеСобытия
        Попытка
            ТекстСообщения = ДанныеСобытия.document.getElementById("1c_bridge").textContent;
            Если ЗначениеЗаполнено(ТекстСообщения) Тогда
                СтандартнаяОбработка = Ложь;
                Сообщить("Получены данные из браузера: " + ТекстСообщения);
            КонецЕсли;
        Исключение
            // Обработка случая, когда элемент еще не создан
        КонецПопытки;
    #КонецЕсли

КонецПроцедуры

Метод 3: Современный подход через window.external

Начиная с более новых версий мобильной платформы (8.3.14+), 1С поддерживает механизм внешних событий. Проанализируем этот более «цивилизованный» метод взаимодействия. Вместо того чтобы имитировать переходы по ссылкам, мы можем вызывать специальную функцию JavaScript, которую платформа 1С умеет перехватывать.

На стороне сайта:


// Передача JSON-объекта в 1С
var data = { action: "add", id: 123, quantity: 1 };
window.external.notification(JSON.stringify(data));

На стороне 1С:

Для элемента формы Поле HTML документа установите обработчик события ВнешнееСобытие. Все, что вы передадите в метод notification, придет в параметр Сообщение этого события. Это самый эффективный способ передачи сложных структур данных (JSON).

Важные нюансы мобильной разработки

Разберем типичные ошибки и особенности, которые могут встретиться при реализации:

Альтернатива: HTTP-сервисы

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

Однако, для быстрых интерфейсных решений (выбор значения из справочника на странице, фильтрация данных), методы с перехватом href или window.external остаются незаменимыми инструментами в арсенале разработчика 1С.

← На главную