Управляемые формы: Поле HTML Документа и веб-клиент

18.07.16

Разработка - Работа с интерфейсом

Взаимодействие javascript и интерфейса 1С дает огромные возможности для реализации нестандартных функций. Раньше можно было напрямую вызывать функции JavaScript через DOM объект document Поля HTML документа. В современных браузерах эта возможность ушла. Более того, в веб-клиенте появляется тип ВнешнийОбъект, который вообще нигде не описан. На Инфостарте были предложения вызывать JavaScript через fireEvent, но это очень неудобно. Предлагаю свой вариант решения.

Вступление

Взаимодействие javascript и интерфейса 1С дает огромные возможности для реализации нестандартных функций. Раньше можно было напрямую вызывать функции JavaScript через DOM объект document Поля HTML документа. В современных браузерах эта возможность ушла. Более того, в веб-клиенте появляется тип ВнешнийОбъект, который вообще нигде не описан. На Инфостарте были предложения вызывать JavaScript через fireEvent, но это очень неудобно. Предлагаю свой вариант решения.

С чего все началось

Разбираться с HTML полем меня сподвигло большое количество задач, в которых была необходимость реализовать интерактивные карты с мониторингом, маршрутизацией и т.д. Поскольку встроенными средствами 1С сделать это невозможно, то раньше использовал ActiveX компоненту собственного изготовления. На обычных формах все работало приемлимо, не считая, что решение и рядом не стояло с открытыми фреймворками типа OpenLayers. После появления управляемых форм, была попытка встроить все тот же ActiveX в HTML документ и разместить его в поле. Решение работает, но в виду ужесточения политики безопасности Microsoft, требовало изменения настроек безопасности на каждом клиенте, что в конечном счете оказалось неприемлимым. Вот тогда мы и поставили перед собой задачу, прикрутить к управляемым формам карты на основе Web-движков (Яндекс.Карты, OpenLayers и прочие Tile ориентированные движки).

Вариант 1. Работает в толстом клиенте, работает в тонком клиенте, не работает в веб-клиенте

Суть метода заключается в получении свойства parentWindow элемента формы ПолеHTMLДокумента. Выглядит примерно так:

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script>
      function HelloWorld(FormLink)
      {
        FormLink.WebMapJavascriptAction("Hello from outside!");
        return "Hello world!";
      }
    </script>
  </head>
  <body>
  </body>
</html>
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	WebКартаРеквизитФормыСтрока = Обработки.УНП_WEBКарта.ПолучитьМакет("HTMLМакет").ПолучитьТекст();
КонецПроцедуры

&НаКлиенте
Процедура WebКартаДокументСформирован(Элемент)
    Сообщить(Элементы.WebКарта.Документ.parentWindow.HelloWorld(ЭтаФорма));
КонецПроцедуры

&НаКлиенте
Процедура WebMapJavascriptAction(Переменная) Экспорт
    Сообщить(Переменная);
КонецПроцедуры

Все это прекрасно работает в толстом и тонком клиенте, но в веб-клиенте это работать не будет, так как в веб-клиенте у ПоляHTMLДокумента в свойстве Документ нет parentWindow.

Вариант 2. Работает в Толстом клиенте, тонком клиенте, веб-клиенте (проверено Chrome, IE, Edge)

Для реализации этого варианта необходимо немного исправить HTML макет. А именно:

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />    
  </head>
  <body>
  </body>
  <script>
    document.body.HelloWorld = function(FormLink)
    {
      FormLink.WebMapJavascriptAction("Hello from outside!");
      return "Hello world!";
    }
  </script>
</html>

И небольшие правки в коде формы

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
    ПовторноеСрабатывание = Ложь;
	WebКартаРеквизитФормыСтрока = Обработки.УНП_WEBКарта.ПолучитьМакет("HTMLМакет").ПолучитьТекст();
КонецПроцедуры

&НаКлиенте
Процедура WebКартаДокументСформирован(Элемент)
    Если Не ПовторноеСрабатывание Тогда // В некоторых случаях, при подключении дополнительных библиотек,
                                        //событие может сработать повторно в уже загруженном документе
       ОбъектBody = Неопределено;

       Попытка
          ОбъектBody = Элементы.WebКарта.Документ.parentWindow.document.body;
       Исключение
       КонецПопытки;

       Если Не ЗначениеЗаполнено(ОбъектBody) Тогда
          Попытка
             ОбъектBody = Элементы.WebКарта.Документ.body;
          Исключение
          КонецПопытки;
       КонецЕсли;

       Если Не ЗначениеЗаполнено(ОбъектBody) Тогда
          Сообщить("Что-то пошло не так");
       Иначе
          Сообщить(ОбъектBody.HelloWorld(ЭтаФорма));
       КонецЕсли;
       
       ПовторноеСрабатывание = Истина;
    КонецЕсли;
КонецПроцедуры

&НаКлиенте
Процедура WebMapJavascriptAction(Переменная) Экспорт
    Сообщить(Переменная);
КонецПроцедуры

Таким образом для толстого и тонкого клиента мы оставляем все как и было, но для универсальности используем расширенный нами объект DOM body. В веб-клиенте элемент формы ПолеHTMLДокумента.Документ содержит тип ВнешнийОбъект, что на самом деле является COM реализацией элемента body по структуре DOM.

Теоретически можно написать функцию в body, которая вернет ссылку на window, и тогда можно вызывать глобальные функции.

Надеюсь кому-то поможет ;-)

ПолеHTMLДокумента веб-клиент Поле ХТМЛ документа HTML ВнешнийОбъект JavaScript

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61795    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54402    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16697    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10735    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9611    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3665    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12080    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. VitaliyCeban 461 18.07.16 14:13 Сейчас в теме
Более полное раскрытие вопроса http://infostart.ru/public/398366/
yaroslav.artem; McLer; Yashazz; compguru84; +4 Ответить
2. compguru84 95 18.07.16 15:12 Сейчас в теме
(1) VitaliyCeban, Согласен, defaultView будет работать в Веб-клиенте
3. Yashazz 4709 19.07.16 16:04 Сейчас в теме
А уж первым-то вариантом и вовсе в замшелые времена пользовались, безо всяких извратов с актив-иксом.
Я ещё в 2012-м году продемонстировал все эти приёмы на примере работы с API Яндекс-карт.

Баян, короче. Вы уж извините, уважаемый комп-гуру)))
compguru84; +1 Ответить
4. compguru84 95 19.07.16 17:11 Сейчас в теме
(3) Yashazz, Да бывает :-) Я, по правде говоря, за оригинальностью и не стремился )
5. adhocprog 1139 20.07.16 19:18 Сейчас в теме
Спасибо автору )
AlexK_2012; frkbvfnjh; compguru84; +3 Ответить
6. compguru84 95 20.07.16 20:09 Сейчас в теме
(5) adhocprog, Если поможет хотя бы одному человеку, значит не напрасен был мой труд :-)
7. kail_riss 9 22.02.18 15:54 Сейчас в теме
Добрый вечер.
Сделал макет в нем разместить текст как в статье, на форму добавил реквизит Док с типом строка, а на форму ДокФормы с типом Поле HTML документа. На Сервере читаю данные макета и пишу их в реквизиты Док. Когда нажимаю на кнопку ругается:
"{ВнешняяОбработка.ВнешняяОбработка1.Форма.Форма.Форма(86)}: Метод объекта не обнаружен (HelloWorld)

Сообщить(Элементы.ДокФормы.Документ.parentWindow.HelloWorld(ЭтаФорма));"

Не передаю Поле HTML документа текст скрипта?
8. PopovaNat 28.06.18 12:13 Сейчас в теме
спасибо за статью, когда только начинаешь разбираться с html в 1с такие простые примеры помогают понять лучше
9. frkbvfnjh 785 13.09.19 13:43 Сейчас в теме
Спасибо, статься помогла! Описаны очень тонкие моменты, коротко и ясно.
10. maxcyb@yandex.ru 21.09.19 23:53 Сейчас в теме
"Теоретически можно написать функцию в body, которая вернет ссылку на window"

Как это сделать? Можно пример?
11. Urmas 16.06.22 09:57 Сейчас в теме
НеприемлЕмо писать "неприемлИмо".
Аж глаз режет. Поправьте, пожалуйста.
Andr0med; +1 Ответить
Оставьте свое сообщение