BrowserFrame 浏览器框

在线示例

BrowserFrame - 浏览器框架 支持在 UI 界面中通过 HTML <iframe> 嵌入外部内容，例如，网页、PDF 文件、图片。

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>

如需在 Jmix Studio 中定义 resource，可以在界面 XML 或者 Component Hierarchy 面板中选择组件，然后点击 Component Inspector 面板的 Add→Resource 按钮。再选择合适的资源。

了解更多关于 resources 相关内容，请访问 Image 图片 组件页。

属性

allow

该属性支持指定嵌入浏览器的 功能策略。属性值必须是下列可选值的列表，以空格分隔，这些值支持当前嵌入的内容支持：

  1. autoplay - 从接口请求自动播放的媒体。

  2. camera - 使用视频输入设备。

  3. document-domain - 设置 document.domain.

  4. encrypted-media - 使用加密媒体扩展 API（EME）。

  5. fullscreen - 使用 Element.requestFullScreen()。

  6. geolocation - 使用地理位置接口。

  7. microphone - 使用音频输入设备。

  8. midi - 使用 Web MIDI API。

  9. payment - 使用支付请求 API。

  10. vr - 使用 WebVR API。

<browserFrame allow="autoplay microphone payment"/>

alternateText

如果 frame 中没有设置内容源或者内容源不可用的情况下，作为默认显示的文字。

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

referrerpolicy

设置当获取 frame 的资源时，发送给哪个 referrer。属性值必须是下列可选值的列表，以空格分隔：

  1. no-referrer - 不会发送 referer header。

  2. no-referrer-when-downgrade - 如果不是 TLS（HTTPS），则不会发送 referer header 给 origins。

  3. origin - 发送的 referrer 限制在 referrer 网页的 origin：scheme、host、port。

  4. origin-when-cross-origin - 发送给其他 origins 的 referrer 会被限制在 scheme、host 和 port。同源浏览也仍会包含 path。

  5. same-origin - 同源则会发送 referrer，但是跨域的请求不会包含 referrer 信息。

  6. strict-origin - 在协议的安全级别相同（HTTPS→HTTPS）时，将网页的 orign 作为 referrer 发送，但是不会发送给低安全级别的目的地（HTTPS→HTTP）。

  7. strict-origin-when-cross-origin - 当发起同源请求时发送全部 URL；在协议的安全级别相同（HTTPS→HTTPS）时，只发送 origin；如果是低安全级别的目的地（HTTPS→HTTP），则不会发送 header。

  8. unsafe-url - referrer 会包含 origin 和 path。该值不安全，因为从 TLS 保护的资源转到了不安全的 origins，从而泄露了 origins 和 paths。

<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 - 允许开启一个展示会话。

  9. allow-same-origin - 允许嵌入的内容当做同源（same origin）处理。

  10. allow-scripts - 允许运行脚本。

  11. allow-storage-access-by-user-activation - 允许请求访问父网页的存储能力，能使用 Storage Access API。

  12. allow-top-navigation - 允许嵌入内容中的超链接导航到父级窗口。

  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 层级结构面板选中该组件，然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

ContextHelpIconClickEvent

参阅 ContextHelpIconClickEvent。

SourceChangeEvent

参阅 SourceChangeEvent。

BrowserFrame XML 属性

可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。

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