BrowserFrame

LIVE DEMO

BrowserFrame allows you to embed content like web pages, PDF files, and images into UI screens using the HTML <iframe> element.

browser frame

Component’s XML-name: browserFrame.

Basics

To display some content, you need to define the resource element with one of the following nested elements:

  • classpath

  • file

  • relativePath

  • theme

  • url

For example:

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

To define resource in Jmix Studio, select the component in the screen descriptor XML or in the Component Hierarchy panel and click on the Add→Resource button in the Component Inspector panel. Select the appropriate resource.

See the detailed information about resources in the description of the Image component.

Attributes

allow

This attribute allows you to specify Feature Policy. The value of the attribute should be a space-separated list of the following possible values that allow current embedded content to:

  1. autoplay - autoplay media requested through the interface.

  2. camera - use video input devices.

  3. document-domain - set document.domain.

  4. encrypted-media - use the Encrypted Media Extensions API (EME).

  5. fullscreen - use Element.requestFullScreen().

  6. geolocation - use Geolocation Interface.

  7. microphone - use audio input devices.

  8. midi - use the Web MIDI API.

  9. payment - use the Payment Request API.

  10. vr - use the WebVR API.

<browserFrame allow="autoplay microphone payment"/>

alternateText

This attribute sets an alternate text for the frame in case the resource is not set or unavailable.

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

referrerpolicy

This attribute allows you to specify which referrer to send when fetching the frame’s resource. The value of the attribute should be a space-separated list of the following possible values:

  1. no-referrer - the referer header will not be sent.

  2. no-referrer-when-downgrade - the referer header will not be sent to origins without TLS (HTTPS).

  3. origin - the sent referrer will be limited to the origin of the referring page: its scheme, host, and port.

  4. origin-when-cross-origin - the referrer sent to other origins will be limited to the scheme, the host, and the port. Navigation on the same origin will still include the path.

  5. same-origin - a referrer will be sent for the same origin, but cross-origin requests will contain no referrer information.

  6. strict-origin - only sends the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS) but doesn’t send it to a less secure destination (HTTPS→HTTP).

  7. strict-origin-when-cross-origin - sends a full URL when performing a same-origin request, only sends the origin when the protocol security level stays the same (HTTPS→HTTPS) and sends no header to a less secure destination (HTTPS→HTTP).

  8. unsafe-url - the referrer will include the origin and the path. This value is unsafe because it leaks origins and paths from TLS-protected resources to insecure origins.

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

sandbox

This attribute allows you to apply additional restrictions to the embedded content. The attribute’s value should be either empty to apply all restrictions or space-separated tokens to lift particular restrictions. The value of the attribute should be a space-separated list of the following possible values:

  1. allow-downloads-without-user-activation - allows the resource to download files without a user gesture.

  2. allow-forms - allows the resource to submit forms.

  3. allow-modals - allows the resource to open modal windows.

  4. allow-orientation-lock - allows the resource to lock the screen orientation.

  5. allow-pointer-lock - allows the resource to use the Pointer Lock API.

  6. allow-popups - allows popups, such as:

    • window.open()

    • target="_blank"

    • showModalDialog()

  7. allow-popups-to-escape-sandbox - allows the sandboxed content to open new windows without those windows inheriting the sandboxing.

  8. allow-presentation - allows the resource to start a presentation session.

  9. allow-same-origin - allows the embedded content to be treated as being from the same origin.

  10. allow-scripts - allows the resource to run scripts.

  11. allow-storage-access-by-user-activation - allows the resource to request access to the parent’s storage capabilities with the Storage Access API.

  12. allow-top-navigation - allows the resource to navigate the top-level browsing context (the one named _top).

  13. allow-top-navigation-by-user-activation - allows the resource to navigate through the top-level view context, but only if a user gesture initiates it.

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

srcdoc

This attribute allows you to specify the HTML code that will be displayed by the component. To do this, you need to escape the HTML code, for example:

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

srcdocFile

This attribute specifies the path to the file containing the HTML code. File content is obtained by using the classPath resource.

Events and Handlers

To generate a handler stub in Jmix Studio, select the component in the screen descriptor XML or in the Jmix UI hierarchy panel and use the Handlers tab of the Jmix UI inspector panel.

Alternatively, you can use the Generate Handler button in the top panel of the screen controller.

ContextHelpIconClickEvent

See ContextHelpIconClickEvent.

SourceChangeEvent

See SourceChangeEvent.

All XML Attributes

You can view and edit attributes applicable to the component using the Jmix UI inspector panel of the Studio’s Screen Designer.

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