IFrame

A content area to embed a web page.

Version: Cloud and 3.223 Edge

IFrame supports permissions to allow or deny downloads, form submissions, microphone and camera access, and popups.

Use an 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.

Demo

For more information about using the IFrame component, refer to the iframes guide.

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

showTopBar

Whether to display a toolbar.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Top bar
Default	false

---

src

The data source.

Type	string
Format	string
Mutability	Control Usage Retool UI Inspector Method setFileUrl()

Examples

https://upload.wikimedia.org/wikipedia/commons/1/14/Marspathfinder.pdf

---

style

Custom style options.

Type	object
Mutability	Control Usage Retool UI Inspector > Appearance > style

---

title

The title text to display.

Type	string
Mutability	Control Usage Retool UI Inspector

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

iFrame.reload()

Reload the component.

Definition

iFrame.reload()

Examples

Reload iFrame.

iFrame.reload();

---

iFrame.scrollIntoView()

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

Definition

iFrame.scrollIntoView(options)

Parameters

options

The scroll options.

Type

object

Object Properties

behavior

The scroll behavior.

Type	string
Allowed Values	Value Description auto Scroll immediately to the specified position. smooth Scroll gradually to the specified position.

---

block

The scroll position relative to the component.

Type	string
Allowed Values	Value Description nearest Scrolls only the minimum amount required for the component to appear in the visible area. Scrolling does not occur if the component is already in view. start Scrolls to position the component at the top of the visible area. center Scrolls to position the component in the middle of the visible area. end Scrolls to position the component at the bottom of the visible area.

---

---

Examples

Scroll the minimum amount to immediately bring iFrame into view.

iFrame.scrollIntoView({behavior: 'auto', block: 'nearest'});

---

iFrame.setHidden()

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

Definition

iFrame.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide iFrame.

iFrame.setHidden(true);

Unhide iFrame.

iFrame.setHidden(false);

---

iFrame.setPageUrl()

Set the URL of the current page.

Definition

iFrame.setPageUrl(url)

Parameters

url

The URL.

Type

string

---

---