17

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> 
  • 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 '17 at 23:29
9

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 | |
  • 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 '18 at 1:07
  • 1
    Google has some additional restrictions due to security . – Mohith Shrivastava Aug 31 '18 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 '18 at 20:06
8

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 | |
  • Thanks! This helps a lot – pooran Nov 28 '19 at 4:30
  • Is it possible to enable communication (ie. passing of parameters or messages) through this component/iframe setup? – Francis A. Apr 8 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 at 14:23
6

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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.