Skip to main content

iFrame

Use an iFrame component to load another HTML page within your application

info

NOTE: This guide is for using iFrame components in your applications, if you'd like to embed your applications externally, see more details here.

Full websites or external applications​

You can embed websites or third party applications into your Superblocks applications by using the Source URL property.

Example of embedding an entire website inside your application

HTML components​

HTML fragments can be placed directly within Source Doc.

Example of embedding HTML source code

Visualizing HTML​

By setting the iFrame's Source Doc, the iFrame can display HTML retrieved from the output of an API or another component. For example, by setting the Source Doc to {{CodeEditor1.parsedValue}} or {{CodeEditor1.stringValue}} the iFrame can be useful for visualizing code from a Code Editor component.

Example of displaying HTML content from a Code Editor

Custom widget passing data to application​

The example below shows displaying a color picker within an iFrame and passing the selected value back to the Input component within the application. The code is given below, note that this makes use of Store Value and Global object metadata.

iFrame Source Doc:

<html>
  <body>
    <input type="color"/>
    <script>
      document.querySelector('input')
        .addEventListener('change', () => {
          parent.postMessage({
            value: document.querySelector('input').value,
          }, "*");
      });
    </script>
  </body>
</html>

iFrame onMessageReceived set to Run JS:

storeValue("color",currentMessage);

Input1 Default Value

{{Global.store.color.value}}

Example of creating a custom widget and passing data back to the application

iFrame Properties​

Component Properties​

PropertyDescription
Source URLSet the URL to display
Source DocInline HTML to embed (Overrides URL)
Loading AnimationWhether iFrame should show loading animation when a dependent API is running, values are a boolean
VisibleControls the visibility of the component, values are a boolean

Reference Properties​

Properties can be accessed from other frontend components and backend APIs by adding the name of the iFrame component, and dot referencing the property. For an iFrame named IFrame1:

PropertyDescription
IFrame1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
IFrame1.sourceReturns the string of the Source URL property
IFrame1.srcDocReturns the string of the Source Doc property

Events​

The following events are triggered by user interactions with iFrame components. Use event handlers to trigger actions in response to user events.

Table Reference PropertyDescription
onMessageReceivedTriggers an action when a message event is received