Is it posible to add iframe directly in lightning components?
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 .
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>
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;
}