IFrame

An embedded web page that supports permissions to allow or deny downloads, form submissions, microphone and camera access, and popups.

Use a HTML component to include custom HTML and CSS instead of an embedded web page. You can also use a Custom Component to include custom React, HTML, and JavaScript.

Properties

Available properties for IFrame with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameTypeDescriptionallowCameraboolean

Whether to allow camera use via getUserMedia().

allowDownloadsboolean

Whether to allow file downloads.

allowFormsboolean

Whether to allow form submissions.

allowFullscreenboolean

Whether to allow fullscreen display via requestFullScreen().

allowGeolocationboolean

Whether to allow geolocation use via getCurrentPosition() and watchPosition().

allowMicrophoneboolean

Whether to allow microphone use via getUserMedia().

allowModalsboolean

Whether to allow modals via window.print(), alert(), confirm(), and prompt().

allowPaymentboolean

Whether to allow payments via PaymentRequest().

allowPopupsboolean

Whether to allow popups via window.open() and target="_blank".

allowSameOriginboolean

Whether to allow the use of browser storage, such as LocalStorage and cookies, by enabling allow-same-origin on the frame. Refer to the MDN iframe documentation for more information.

allowTopNavigationboolean

Whether to allow links and code to navigate to away from the current app.

hiddenboolean

Whether the component is visible.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

showTopBarboolean

Whether to display a top bar that contains user actions and title, if set.

srcstring

The source URL.

titlestring

The title to display in the top bar when showTopBar is true.

tooltipTextstring

The text to display in a tooltip on hover or focus.

Methods

Methods for interacting with IFrame. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

setPageUrl(pageUrl: string)

Set the src value to specify the URL to use.

reload()

Reload the iframe.