BrowserFrame

ДЕМОНСТРАЦИЯ

BrowserFrame позволяет встраивать в экраны UI веб-страницы, PDF-файлы и изображения с помощью HTML-элемента <iframe>.

browser frame

XML-имя компонента: browserFrame.

Основы

Чтобы отобразить некоторый контент, необходимо определить элемент resource с одним из следующих вложенных элементов:

  • classpath

  • file

  • relativePath

  • theme

  • url

Например:

<browserFrame width="780px" height="580px">
    <resource>
        <url url="https://www.jmix.io/framework/"/>
    </resource>
</browserFrame>

Подробная информация о ресурсах находится в описании компонента Image.

Атрибуты

allow

Данный атрибут определяет Feature Policy для компонента. Значение атрибута может быть разделенным пробелами списком следующих возможных значений, которые позволяют текущему встроенному документу:

  1. autoplay - автоматически воспроизводить медиа, запрашиваемое через интерфейс.

  2. camera - использовать внешние видеоустройства.

  3. document-domain - устанавливать document.domain.

  4. encrypted-media - использовать Encrypted Media Extensions API (EME).

  5. fullscreen - использовать Element.requestFullScreen().

  6. geolocation - использовать Geolocation Interface.

  7. microphone - использовать внешние аудиоустройства.

  8. midi - использовать Web MIDI API.

  9. payment - использовать Payment Request API.

  10. vr - использовать WebVR API.

<browserFrame allow="autoplay microphone payment"/>

alternateText

Данный атрибут устанавливает альтернативный текст на случай, если ресурс недоступен или не задан.

<browserFrame alternateText="Something goes wrong..."/>

referrerpolicy

Данный атрибут указывает, какой реферер отправлять при извлечении ресурса фрейма. Значение атрибута может быть разделенным пробелами списком следующих возможных значений:

  1. no-referrer - заголовок реферера не будет отправлен.

  2. no-referrer-when-downgrade - заголовок реферера не будет отправлен в источник без TLS (HTTPS).

  3. origin - отправленный реферер будет ограничен источником ссылающейся страницы: ее схемой, хостом и портом.

  4. origin-when-cross-origin - реферер, отправленный в другие источники, будет ограничен схемой, хостом и портом. Навигация по тому же источнику будет по-прежнему включать путь.

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

  6. strict-origin - отправляет источник документа в качестве реферера только тогда, когда уровень безопасности протокола остается прежним (HTTPS→HTTPS), но не отправляет его в менее безопасное место назначения (HTTPS→HTTP).

  7. strict-origin-when-cross-origin - отправляет полный URL-адрес при выполнении запроса из того же источника только тогда, когда уровень безопасности протокола остается прежним (HTTPS→HTTPS), но не отправляет его в менее безопасное место назначения (HTTPS→HTTP).

  8. unsafe-url - реферер будет включать в себя источник и путь. Это значение небезопасно, поскольку оно приводит к утечке источников и путей из защищенных TLS ресурсов в небезопасные источники.

<browserFrame referrerpolicy="origin unsafe-url"/>

sandbox

Данный атрибут накладывает дополнительные ограничения на содержимое фрейма. Если значение атрибута пустое, то применяются все ограничения. Если значение атрибута представляет собой разделенный пробелами список ограничений, то указанные ограничения снимаются. Значение атрибута может быть разделенным пробелами списком следующих возможных значений:

  1. allow-downloads-without-user-activation - позволяет загружать файлы без инициации пользователем.

  2. allow-forms - позволяет содержимому фрейма отправлять формы.

  3. allow-modals - позволяет содержимому фрейма открывать модальные окна.

  4. allow-orientation-lock - позволяет содержимому фрейма блокировать ориентацию экрана.

  5. allow-pointer-lock - позволяет содержимому фрейма использовать Pointer Lock API.

  6. allow-popups - позволяет содержимому фрейма использовать всплывающие окна, такие как:

    • window.open()

    • target="_blank"

    • showModalDialog()

  7. allow-popups-to-escape-sandbox - позволяет содержимому фрейма открывать новые всплывающие окна, создавая чистый контекст просмотра.

  8. allow-presentation - позволяет содержимому фрейма использовать Presentation API.

  9. allow-same-origin - позволяет загружать содержимое фрейма, воспринимая его из того же источника, что и родительский документ.

  10. allow-scripts - разрешает запуск и выполнение скриптов.

  11. allow-storage-access-by-user-activation - позволяет ресурсу запрашивать доступ к возможностям родительского хранилища с помощью Storage Access API.

  12. allow-top-navigation - позволяет содержимому фрейма получать доступ к элементам верхнего уровня (с именем _top).

  13. allow-top-navigation-by-user-activation - позволяет содержимому фрейма получать доступ к элементам верхнего уровня, если это инициировано пользователем.

<browserFrame sandbox="allow-forms allow-modals allow-popups"/>

srcdoc

Данный атрибут определяет HTML-контент для отображения во встроенном фрейме. Для этого нужно заэкранировать HTML-код, например:

<browserFrame srcdoc="&lt;h1&gt; Awesome! &lt;h1&gt;"/>
browser frame src

srcdocFile

Данный атрибут путь к файлу, содержащему HTML-код. Содержимое файла получается с помощью ресурса classPath.

События и слушатели

Чтобы сгенерировать заглушку слушателя в Jmix Studio, выберите компонент в XML-дескрипторе экрана или на панели иерархии Jmix UI и используйте вкладку Handlers на панели инспектора Jmix UI.

В качестве альтернативы вы можете воспользоваться кнопкой Generate Handler на верхней панели контроллера экрана.

ContextHelpIconClickEvent

См. ContextHelpIconClickEvent.

SourceChangeEvent

См. SourceChangeEvent.

Все XML-атрибуты

Просматривать и редактировать атрибуты, применимые к компоненту, можно с помощью панели инспектора Jmix UI в конструкторе экранов Studio.

align - allow - alternateText - box.expandRatio - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - height - htmlSanitizerEnabled - icon - id - referrerpolicy - responsive - rowspan - sandbox - srcdoc - srcdocFile - stylename - visible - width