Html виджет

Элемент управления Html виджет предназначен для отображения HTML-страницы с заданным адресом.

Рисунок 1. Элемент управления "Html виджет" с содержимым HTML-страницы в разметке исходящего документа

Html виджет может загружать HTML-страницу из указанного файла или ресурса. Дла загрузки HTML-страницы нужно указать значение свойства Режим. URL адрес можно указать непосредственно в настройках ЭУ или получить из данных карточки.

Свойства

Общие

Название ЭУ

Название типа элемента управления.

Название

Уникальное название элемента управления.

Тег

Простое текстовое свойство, позволяющее добавить для ЭУ скрипт (например, JSON).

Внешний вид

Содержимое всплывающей подсказки.

Локализуемый

Данные

Расширенный источник данных

Выбор типа источника данных элемента управления: текущая карточка или один из типов, настроенных в корневом элементе разметки.

Источник данных

Секция карточки, содержащая данные элемента управления.

Поле данных

Текстовое поле карточки, содержащее код отображаемой HTML-страницы.

Свойства Поле данных и Источник данных доступны, когда в настройке Режим выбрано значение Из карточки.

URL

Адрес HTML-страницы, который зависит от выбранного режима ЭУ (настройка Режим):

В режиме Из файла следует указывать относительный путь к файлу HTML-страницы в каталоге установки модуля Web-клиент, например: Content\Extensions\HtmlPages\manual.html.

Файл HTML-страницы следует размещать только в подкаталоге Content/Extensions или Content/Solutions каталога установки Web-клиента.

В режиме Внешний ресурс следует указывать URL-адрес HTML-страницы, например: http://web.domain.com/htmlpages/manual.html.

Внешний ресурс, с которого загружается HTML-страница, должен разрешать встраивание страниц в IFRAME (не отправлять заголовок X-FRAME-OPTIONS в ответе).

Настройка "URL" отображается, когда выбран режим Из файла или Внешний ресурс.

Поведение

Sandbox фрейма

Значение атрибута sandbox, добавляемого к тегу IFRAME. Должен быть установлен флаг Использовать sandbox фрейма.

Свойство Sandbox фрейма отображается, когда выбран режим Внешний ресурс.

Видимость

Настройка видимости. Элемент управления отображается в карточке, когда флаг установлен. Элемент управления и любое его содержимое не отображаются, когда флаг снят.

Адаптивный

Дополнительные css классы

Названия дополнительных классов CSS для изменения стиля элемента управления. Перечисляются через пробел.

Обезопасить HTML

Флаг, указывающий на необходимость очистки HTML-кода внедряемой страницы от потенциально небезопасных элементов, через которые возможна XSS-атака (в частности, скрипты).

Операция редактирования для видимости

Определяет операцию, которая должна быть доступна, чтобы ЭУ отображался для пользователя. Работа свойства зависит от значения свойства Видимость:

Когда флаг Видимость установлен и выбрана операция редактирования для видимости, видимость элемента определяется исходя из доступности пользователю выбранной операции редактирования.
Когда флаг Видимость установлен, и операция редактирования для видимости НЕ выбрана, ЭУ отображается всегда.
Когда флаг Видимость НЕ установлен, ЭУ всегда скрыт.

Использовать sandbox фрейма

Флаг, указывающий на необходимость добавления к тегу IFRAME атрибута sandbox (см. developer.mozilla.org) со значением из свойства Sandbox фрейма.

Свойство Использовать sandbox фрейма отображается, когда выбран режим Внешний ресурс.

Прокрутка фрейма

Режим показа полос прокрутки для содержимого, отображаемого во фрейме:

*auto*	Необходимость отображения полос прокрутки определяется автоматически.
*yes*	Полосы прокрутки отображаются всегда.
no	Полосы прокрутки всегда скрыты.

Свойство Прокрутка фрейма отображается, когда выбран режим Внешний ресурс.

Режим

Определяет способ получения данных для отображения в виджете:

Из карточки. Должна отображаться HTML-страница, код которой хранится в поле карточки, указанном в настройке Поле данных.
Из файла. Должна отображаться HTML-страница из файла, путь к которому указан в настройке URL.
Внешний ресурс. Должна отображаться HTML-страница, адрес которой указан в настройке URL.

В режиме Внешний ресурс HTML-страницы будут открываться во фрейме. В режимах Из файла и Из карточки HTML-страницы будут встраиваться в HTML-код страницы Web-клиента. Особенности размещения страницы во фрейме и встраивании в HTML-код приведены в конце раздела.

Стандартный css класс

Название CSS класса, в котором определён стандартный стиль элемента управления.

Размеры

Высота

Высота фрейма.

Ширина

Ширина фрейма.

Значения высоты и ширины фрейма указываются с единицей измерения (например, 100px).

Свойства Высота и Ширина отображаются, когда выбран режим Внешний ресурс.

События

При наведении курсора

Вызывается при входе курсора мыши в область элемента управления.

При отведении курсора

Вызывается, когда курсор мыши покидает область элемента управления.

При щелчке

Вызывается при щелчке мыши по любой области элемента управления.

Отличительные особенности внедрения HTML-страницы от открытия страницы во фрейме

Если для отображения HTML-страницы используется фрейм (выбран режим Внешний ресурс), страница отображается в отдельном окне браузера, размещенном внутри страницы Web-клиента, при этом:

Стили, используемые Web-клиентом, не распространяются на содержимое фрейма.
HTML-страница загружается асинхронно с загрузкой страницы Web-клиента.

Если HTML-страница внедряется (без использования фрейма), HTML-код страницы добавляется к HTML-коду страницы Web-клиента без преобразований, при этом:

В коде внедряемой страницы не должно быть тегов head, body и style.
Внедряемый код должен быть безопасным, т.к. данный код вставляется без изменений — иначе используйте фрейм, с установленным флагом Использовать sandbox фрейма.

Особенности использования изображений и стилей

Если для отображения HTML-страницы используется фрейм (режим Внешний ресурс):

Путь к ресурсам (изображение, скрипт) указывается относительно файла HTML-страницы, например:
```
<img src="images/pic.jpg" />
```
Cтиль подключается стандартным образом — в теге body.

Если для отображения HTML-страницы используется внедрение:

Путь к ресурсам указывается относительно корня сайта, например:
```
<img src="Content\Extensions\HtmlPages\imgages\pic.jpg" />
```
CSS файл со стилями размещается в папке Site\Content\Solutions\<Название решения>\Styles или Site\Content\Extensions\<Название расширения>\Styles каталога установки Web-клиента.