Категории
Excel (2)
- SQL (4)
- Web-Сервисы (3)
- Word (1)
- XML (3)
- Документы (1)
- Запросы (11)
- ЗУП 2.5 (5)
- ЗУП 3.1 (2)
- Иерархические структуры (2)
- Конструктор запросов (7)
- Метаданные (1)
- Начинающим (8)
- Обмен данными (7)
- Отчеты и обработки (3)
- Платформа 8.3 (9)
Работа с формами (6)
- Разное (5)
- Регистры (5)
- Регламентные задания (3)
- Сервер 1С:Предприятия (1)
- Скачать (1)
- СКД (8)
- УРБД (2)
- Философия разработки (1)
- Фишки (8)
- Язык программирования 1С (7)
Поле 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 документа прописать вот такую строчку:
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
которая говорит браузеру Internet Explorer, что он должен работать в режиме совместимости с самой последней его версией. В которой нам конечно же доступны CSS3 и HTML5.
Пишем свой код для поля HTML документа
А теперь создадим свою мини веб страничку и отобразим ее в другом поле HTML документа. По аналогии с предыдущим примером создадим реквизит СтилиCSS и разместим его в отдельной закладке на форме.
Далее перейдем к написанию кода html. Минимально необходимый код, так сказать заготовка нашей странички выглядит следующим образом:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</head>
<body>
</body>
</html>
Внутри тега <head></head> обычно прописывают различные метатеги, а также мы поместим в него тег <style></style> в котором пропишем стили css. Как правило стили css размещают в отдельном файле, но поскольку у нас нет такой возможности воспользуемся тегом style. Содержимое же самой страницы размещают внутри тега <body></body>. В качестве примера нарисуем внутри нашего поля html квадрат, а с помощью стилей css заставим его при наведении курсора мыши растягиваться на всю ширину.
Итоговый код html будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<style>
.move {
width: 100px;
height: 100px;
background-color: aquamarine;
}
.move:hover {
width: 100%;
transition-property: width;
transition-duration: 5s;
}
</style>
</head>
<body>
<div class='move'></div>
</body>
</html>
Теперь вставим этот код в процедуру ПриСозданииНаСервере:
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
СтилиCSS =
"<!DOCTYPE html>
|<html lang='ru'>
| <head>
| <meta charset='utf-8'>
| <meta http-equiv='X-UA-Compatible' content='IE=edge'>
| <style>
|
| .move {
| width: 100px;
| height: 100px;
| background-color: aquamarine;
| }
|
| .move:hover {
| width: 100%;
| transition-property: width;
| transition-duration: 5s;
| }
|
| </style>
| </head>
|
| <body>
|
| <div class='move'></div>
|
| </body>
|
|</html>";
КонецПроцедуры
Проверяем как это выглядит в режиме 1С:Предприятия
Наводим курсор на квадрат и наблюдаем как он в течение 5 секун плавно растягивается на всю ширину нашего поля:
5 комментариев на «“Поле HTML документа”»
Добавить комментарий
Добрый день, отличная статья!
Подскажите пожалуйста, как реализовать следующее:
также как и у вас на управляемой форме есть поле с видом ПолеHTMLДокумента, присваиваю ему значение с URL, все отображается. Т.е. сам HTML я вручную не формирую.
Задача состоит в том, чтобы к отображаемой странице применить CSS, который находится в отдельном файле. Каким образом это сделать?
Добрый день!
Думаю, что располагать css в отдельном файле не очень хорошая идея. Это приведет к тому что придется всегда помнить об этом файле и о месте где он находится. При переносе базы на другой сервер есть риск забыть про этот файл. Также возможно придется прописывать другой путь к файлу. То же самое касается развертывания разработческой базы. И путь к файлу в разработческой базе и в боевой наверняка будет отличаться. Поэтому лучше внедрить css в текст самого html документа как описано в статье.
Опубликуйте файл чтобы к нему был доступ по внешней ссылке (web или ftp) и подключайте его в страницу.
Здравствуйте! почему в 1с табличной части в Поле html если кликать на ячейку не работает Модальное окно html. Проверил если вставить этот код в блокнот, поменять расширение на html — модальное окно работает если кликать по ячейкам таблицы… Почему так?
Добрый день! Всё делаю как здесь написано, но на закладке CSS не появляется никакой квадрат никакого цвета. Заметил, что у Вас в «Свойства: Форма» есть
«События:
ПриСозданииНаСервере
ПриОткрытии
ОбработкаВыбора
ВнешнееСобытие»
а в статье вообще отсутствует описание событий «ПриОткрытии , ОбработкаВыбора,
ВнешнееСобытие» . А модуль объекта — закрыт паролем. Убедительная просьба — помогите в решении указанной проблемы с квадратом.