Skip to content

IFramePanel control

This control renders a Panel with an iframe as content.

Here is an example of the control in action:

IFrameDialog control

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the following modules to your component:
import { IFramePanel } from "@pnp/spfx-controls-react/lib/IFramePanel";
  • The IFramePanel uses the Office Fabric UI implemenation of the panel. The properties of this control inherit the panel properties.

  • Use the IFramePanel control in your code as follows (this._onIframeLoaded and this._onDismiss are methods that should be implemented if you want to execute some actions when the iframe content is loaded and dialog should be closed respectively.)

<IFramePanel url={this.state.iFrameUrl}
             headerText="Panel Title"
             iframeOnLoad={this._onIframeLoaded.bind(this)} />


The IFramePanel component extends the properties from the Fabric UI IPanelProps along with the additional following properties:

Property Type Required Description
url string yes iframe Url
heigth string yes iframe's height, if empty it will be dynamically set to the full height available in the panel's content area
iframeOnload iframeOnLoad?: (iframe: any) => {} no iframe's onload event handler
name string no Specifies the name of an iframe
allowFullScreen boolean no Specifies if iframe content can be displayed in a full screen
allowTransparency boolean no Specifies if transparency is allowed in iframe
sandbox string no Enables an extra set of restrictions for the content in an iframe
scrolling string no Specifies whether or not to display scrollbars in an iframe
seamless string no When present, it specifies that the iframe should look like it is a part of the containing document (no borders or scrollbars)