Skip to main content

Iframe

Use iframes to embed other webpages within your applications

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the IFrame widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
URLSets the URL of the page to load within the iframe.
srcDocProvide HTML (and CSS within <style> tags) to render within the iframe instead of using a URL. When this property has a value, the widget's URL property will be ignored.
TitleSets a title for the iframe content. This title appears in the iframe's HTML tag (<iframe ... title="MyTitle">) and on the widget's internal IFrame1.title property.
Animate LoadingWhen turned off, the widget will load without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by enabling the JS label next to it.

Binding Properties

These properties allow you to bind your IFrame widget with any other widget in queries or JS objects. The following table lists all the binding properties.

Binding PropertyDescription
isVisibleReflects the state of the widget's Visible setting (bool).
messageContains a message received from the embedded page via the JS postMessage() method. It may be of any type. The property is undefined before a message is received.
sourceContains the URL of the embedded page (string). Does not reflect the content set in the srcDoc property.
titleContains the title of the iframe as set in the widget's Title property (string).

Let’s take a closer look at the message property.

Message

The iframe widget listens for messages sent from the page embedded within it. When this page sends data via the Javascript postmessage() function, Appsmith receives the message and exposes its content to the user on the iframe’s message property.

The message content may be of any type; before any message is received, this property is undefined.

You can try out the message property by following the steps below:

Follow these steps to test out how to receive messages posted from the sites embedded in your iframe!
  1. On a blank canvas, drag and drop a new iframe widget.

  2. We need to embed a page that is able to send a message with postMessage(). In the iframe widget’s settings, copy and paste the following snippet into its srcDoc property:

    <input id="messageinput" type="text"></input>
    <input type="button" onclick="sendMyMessage()" value="SEND" />
    <script>
    function sendMyMessage() {
    const msgText = document.getElementById("messageinput").value;
    window.parent.postMessage(msgText, "*");
    }
    </script>

    You’ve created a very simple HTML document in the iframe containing a text input, a button, and a script to handle sending the message.

  3. Drag and drop a new Text widget onto the canvas, and set its Text property to {{Iframe1.message}}.

  4. Type a string into the iframe’s input box and click the "Send” button. You should see your Text widget update to contain the string that you sent from the iframe.

info

When a message is received, Appsmith will also execute any code or actions set within the iframe’s onMessageReceived event. Try it out – set an action within the onMessageReceived event, and send another message to watch the results!

Events

You can define functions that will be called when these events are triggered in the widget.

ActionDescription
onURLChangedSets the action to take place when the widget's URL is changed. It can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.
onSrcDocChangedSets the action to take place when the srcDocproperty is changed. It can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.
onMessageReceivedSets the action to take place when a postMessage event is received from the embedded page. It can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.

Styles

Style properties allow you to change the look and feel of the widget.

Style PropertiesDescription
Border ColorSets the color of the widget's border. Accepts valid CSS color values.
Border OpacitySets the opacity of the widget's border. Accepts a number value which is interpreted as a percentage.
Border WidthSets the width of the widget's border. Accepts a number value which is interpreted as pixels.
Border RadiusRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowCasts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values.