- Поле HTML документа в управляемом и обычном приложении
- Обычное приложение
- Управляемое приложение
- Поле HTML документа
- Просмотр веб страницы через поле HTML документа
- Метатег X-UA-Compatible
- Пишем свой код для поля HTML документа
- 5 комментариев на «“Поле HTML документа”»
- Управляемые формы: Поле HTML Документа и веб-клиент
- Вступление
- С чего все началось
- Вариант 1. Работает в толстом клиенте, работает в тонком клиенте, не работает в веб-клиенте
- Вариант 2. Работает в Толстом клиенте, тонком клиенте, веб-клиенте (проверено Chrome, IE, Edge)
Поле HTML документа в управляемом и обычном приложении
В 1С предприятии, как в обычном так и управляемом приложении, можно создать элемент формы «Поле HTML документа». Данный элемент позволяет выводить на форму HTML страницы полученные по URL адресу.
Обычное приложение
На примере внешней обработки нужно создать:
Реквизит формы: ПолеHTMLДокумента1
Для перехода на страницу используется метод «Перейти».
Процедура КнопкаПерейтиНажатие(Кнопка)
ЭлементыФормы.ПолеHTMLДокумента1.Перейти("https://www.1c.ru");
КонецПроцедуры
Управляемое приложение
На примере внешней обработки нужно создать:
Реквизит формы: ПолеHTMLДокумента1 (тип Строка)
Поле формы: ПолеHTMLДокумента1 (вид Поле HTML документа)
В управляемом приложении метод «Перейти» недоступен. Поэтому для перехода на страницу, URL-адрес устанавливается не полю формы, а реквизиту формы.
Для того чтобы добавить сообщение, необходимо Войти или Зарегистрироваться
О сайте | Обратная связь | Правила | Новости 1С | Copyright © 2023 Цитирование материалов (тексты, изображения, программный код) допускается только с размещением активной ссылки на сайт 1CLenta.ru |
Поле HTML документа
рубрики: Работа с формами | Дата: 10 августа, 2018
Скачать обработку с примерами из статьи: professia1c_html_document.epf
Платформа: 8.3; Тип формы: управляемая.
Сегодня рассмотрим такой элемент форм 1С как Поле HTML документа.
Название его говорит само за себя и предназначено это поле для отображения кода в формате html. Первое, что приходит на ум это конечно же организовать просмотр сайтов. И такая возможность действительно есть. И второе — для тех кто немного знаком с html и css есть возможность самим написать код для отображения в html поле. Учитывая, что у css3 достаточно широкие возможности стилизации, и в том числе присутствует возможность анимации, может получится достаточно живая и красочная картинка. Плюс, как известно, в html можно включать и код на языке java script. И тут уже возможности ограничиваются только вашей фантазией. Рассмотрим на примере оба вышеперечисленных варианта. Для демонстрации создадим внешнюю обработку на управляемых формах.
Просмотр веб страницы через поле HTML документа
Эта возможность реализуется очень просто. В реквизиты формы добавим реквизит Сайт с типом «Строка»:
Разместим этот реквизит на форме и в свойствах выберем вид — «Поле HTML документа»:
И конечно же добавим строку для ввода адреса сайта.
Остальное делается практически одной строчкой кода, которую мы вставим в обработчик события ПриИзменении адресной строки сайта:
Теперь опробуем обработку в режиме 1С:Предприятия. Ввожу адрес своего сайта www.professia1c.ru и получаю вот такое сообщение об ошибке:![]()
Это связано с тем, что по умолчанию поле HTML документа работает в режиме совместимости с древней версией браузера Internet Explolrer. И естественно, что очень многие владельцы сайтов уже не заморачиваются с поддержкой старых версий. Хотя если ввести адрес сайта самой 1С — www.1c.ru, мы увидим, что он успешно отобразится в нашем поле. В сети предлагается несколько разных способов как победить эту ошибку. От редактирования настроек браузера IE, до редактирования реестра. Мне на моей домашней 32-разрядной версии Windows 10 помогло редактирование реестра. Для этого необходимо найти ветку «HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION» и добавить в нее параметр 1Cv8c.exe со значением 11000 в десятичной системе исчисления.![]()
После этого все встает на свои места и сайт отображается корректно. Понятно, что когда речь идет о крупном предприятии, то отредактировать реестр на десятках и сотнях машин может быть проблематично. Но в каких-то отдельных случаях может выручить.
На самом деле не совсем понятно где это может пригодится, если есть стандартный браузер. Ну с фирмой 1С все понятно — она таким образом рекламу нам показывает каждый раз когда мы 1С:Предприятие запускаем)).
Метатег X-UA-Compatible
Когда речь не идет о просмотре сайтов и мы пишем полностью свой код для поля html документа, то нам нет необходимости редактировать реестр для того чтобы воспользоваться всеми прелестями CSS3 и HTML5. Для этого воспользуемся метатегом X-UA-Compatible. Это специфический метатег предназначенный для браузера Internet Explorer. Он позволяет устанавливать режим совместимости для IE. Если быть точным, то X-UA-Compatible — это значение аттрибута http-equiv, который в свою очередь используется вместе с аттрибутом content. Короче говоря нам необходимо в разделе head нашего html документа прописать вот такую строчку:
которая говорит браузеру Internet Explorer, что он должен работать в режиме совместимости с самой последней его версией. В которой нам конечно же доступны CSS3 и HTML5.
Пишем свой код для поля HTML документа
А теперь создадим свою мини веб страничку и отобразим ее в другом поле HTML документа. По аналогии с предыдущим примером создадим реквизит СтилиCSS и разместим его в отдельной закладке на форме.
Далее перейдем к написанию кода html. Минимально необходимый код, так сказать заготовка нашей странички выглядит следующим образом:
Внутри тега обычно прописывают различные метатеги, а также мы поместим в него тег в котором пропишем стили css. Как правило стили css размещают в отдельном файле, но поскольку у нас нет такой возможности воспользуемся тегом style. Содержимое же самой страницы размещают внутри тега . В качестве примера нарисуем внутри нашего поля html квадрат, а с помощью стилей css заставим его при наведении курсора мыши растягиваться на всю ширину.
Итоговый код html будет выглядеть следующим образом:
Теперь вставим этот код в процедуру ПриСозданииНаСервере:
Проверяем как это выглядит в режиме 1С:Предприятия
Наводим курсор на квадрат и наблюдаем как он в течение 5 секун плавно растягивается на всю ширину нашего поля:

5 комментариев на «“Поле HTML документа”»
Добрый день, отличная статья! Подскажите пожалуйста, как реализовать следующее: также как и у вас на управляемой форме есть поле с видом ПолеHTMLДокумента, присваиваю ему значение с URL, все отображается. Т.е. сам HTML я вручную не формирую. Задача состоит в том, чтобы к отображаемой странице применить CSS, который находится в отдельном файле. Каким образом это сделать?
Добрый день!
Думаю, что располагать css в отдельном файле не очень хорошая идея. Это приведет к тому что придется всегда помнить об этом файле и о месте где он находится. При переносе базы на другой сервер есть риск забыть про этот файл. Также возможно придется прописывать другой путь к файлу. То же самое касается развертывания разработческой базы. И путь к файлу в разработческой базе и в боевой наверняка будет отличаться. Поэтому лучше внедрить css в текст самого html документа как описано в статье.
Опубликуйте файл чтобы к нему был доступ по внешней ссылке (web или ftp) и подключайте его в страницу.
Здравствуйте! почему в 1с табличной части в Поле html если кликать на ячейку не работает Модальное окно html. Проверил если вставить этот код в блокнот, поменять расширение на html — модальное окно работает если кликать по ячейкам таблицы… Почему так?
Добрый день! Всё делаю как здесь написано, но на закладке CSS не появляется никакой квадрат никакого цвета. Заметил, что у Вас в «Свойства: Форма» есть
«События:
ПриСозданииНаСервере
ПриОткрытии
ОбработкаВыбора
ВнешнееСобытие»
а в статье вообще отсутствует описание событий «ПриОткрытии , ОбработкаВыбора,
ВнешнееСобытие» . А модуль объекта — закрыт паролем. Убедительная просьба — помогите в решении указанной проблемы с квадратом.
Управляемые формы: Поле HTML Документа и веб-клиент
Взаимодействие 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Документа. Выглядит примерно так:
function HelloWorld(FormLink)
&НаСервере Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) WebКартаРеквизитФормыСтрока = Обработки.УНП_WEBКарта.ПолучитьМакет("HTMLМакет").ПолучитьТекст(); КонецПроцедуры &НаКлиенте Процедура WebКартаДокументСформирован(Элемент) Сообщить(Элементы.WebКарта.Документ.parentWindow.HelloWorld(ЭтаФорма)); КонецПроцедуры &НаКлиенте Процедура WebMapJavascriptAction(Переменная) Экспорт Сообщить(Переменная); КонецПроцедуры
Все это прекрасно работает в толстом и тонком клиенте, но в веб-клиенте это работать не будет, так как в веб-клиенте у ПоляHTMLДокумента в свойстве Документ нет parentWindow.
Вариант 2. Работает в Толстом клиенте, тонком клиенте, веб-клиенте (проверено Chrome, IE, Edge)
document.body.HelloWorld = function(FormLink)
&НаСервере Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) ПовторноеСрабатывание = Ложь; 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, и тогда можно вызывать глобальные функции. Надеюсь кому-то поможет 😉