Table of Contents

iFrame

The iFrame component lets you embed external content, such as InFront or Power BI reports, in a Workbook. Use the LoadData action and call the SetSrc(…) function to specify the source url dynamically, or set the Source property to specify a static or initial source.

Actions

  • Load Data
    Use this action to refresh or change the contents displayed by calling the SetSrc(…) function. If you just want to display static content, specify the url in the Source property of the component.

  • Execute Expression
    Use this action if you want to dynamically change the css class applied to the iframe container. You can call AddCssClass(…), RemoveCssClass(…) and ToggleCssClass(…) functions.

  • Send Message
    Sends a message to the iFrame window using window.postMessage(…).
    To specify the message to pass to the iFrame, use:

ConfigureMessage(payload, targetOrigin)

Example

This example shows how to send a message to an iFrame using the Send Message action of the iFrame component.
To specify the message, use the ConfigureMessage(…) function:

ConfigureMessage({"MyMessage" : "Hello World"}, "*");

Events

  • Message Received
    Receives messages sent from the iframe content window. Use the @Event.Data property access the received message.
Note

Note to senders: Use the sendMessage(...) API in the invision-extensions-iframe-sdk npm module to send messages from the iframe to the Workbook.


Videos

Edit this page