18

Is it possible to add iframe directly in a lightning component as below to visible in community sites ?

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <iframe width="800" height="600" style="border: 1px solid" src="---" />
</aura:component>
Improve this question
1
  • 4
    Yeah you can do that. A mixed content error will be thrown if they are not different protocols i.e. http and https.
    – Salesforcesmarty
    Mar 29, 2017 at 23:29

3 Answers 3

Reset to default
12

Its definitely possible to use an iframe inside the lightning component .The out of box Visualforce component also internally just iframes the Visualforce inside the lightning component .Even the new lightning:container does an iframe of the third party application inside the lightning component .

As the comment said if there are http and https urls are mixed you will get a mixed content error so to avoid it always use src value as an https URL .

Improve this answer
3
  • is this restricted to internal salesforce? imean i am trying <iframe src="google.com" /> and the component just display a hollow iframe
    – manza
    Aug 31, 2018 at 1:07
  • 1
    Google has some additional restrictions due to security .
    – Mohith Shrivastava
    Aug 31, 2018 at 14:39
  • thank you probably bad reference i did try google but my iframe is for a GAE (google app engine), i did try other several websites with no luck, it seems something needs to be done on the server side of the hosting to allow iframe? perhaps thanks
    – manza
    Aug 31, 2018 at 20:06
9

Here is an example of embedding an iframe in a Lightning Component:

https://github.com/nikitakarpenkov/iframe-lightning-component

The component itself is in the IframeComponent.cmp file:

https://github.com/nikitakarpenkov/iframe-lightning-component/blob/master/aura/IframeComponent/IframeComponent.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="iframeUrl" type="String" />
    <aura:attribute name="width" type="String" />
    <aura:attribute name="height" type="String" />
    <aura:attribute name="scrolling" type="String" />
    <aura:attribute name="frameBorder" type="String" />
    <aura:attribute name="style" type="String" />
    <aura:attribute name="sandbox" type="String" />

    <iframe src="{!v.iframeUrl}"
            width="{!v.width}"
            height="{!v.height}"
            style="{!v.style}"
            frameBorder="{!v.frameBorder}"
            sandbox="{!v.sandbox}"
            scrolling="{!v.scrolling}"/>

</aura:component>
Improve this answer
3
  • Thanks! This helps a lot
    – pooran
    Nov 28, 2019 at 4:30
  • Is it possible to enable communication (ie. passing of parameters or messages) through this component/iframe setup?
    – Francis A.
    Apr 8, 2020 at 10:39
  • 1
    Sure you can use the usual suspects for Iframe communication, for passing data in you can utilize the query params and if you want to have two-way communication window.postMessage() is your friend!
    – Christian Ulbrich
    Apr 15, 2020 at 14:23
7

Additional clarification for "visible in community sites". The iframe src needs to be dynamic if the page will be visible in both standard Salesforce as well as a Lightning Community.

This is because the relative URL for standard Salesforce access to your Visualforce page is /apex/YourPageName. However, if you have a community with the URL name "my_community" then the relative url for community access to your Visualforce page is /my_community/apex/YourPageName. (You can ignore the base of the URL and use relative URLs only.)

Below is a sample method for getting the relative URL dynamically from the apex controller:

@AuraEnabled
public static String getVisualforceRelativeURL(String communityName, String pageName) {
    String siteUrl = Site.getMasterLabel();
    String returnUrl = '/apex/' + pageName;

    if (siteUrl != null && siteUrl.contains(communityName) ) {
        returnUrl = '/' + communityName + '/apex/' + pageName;
    }
    return returnUrl;
}
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .