Apex Code Development You need to sign in to do that
Don't have an account?
Iframe to display a VF page inside a Lightning Component
Hi
I have a Lightning Component and want to display a inside a VF page. I read that the solution is to use Iframe, but it is not working for me.
Result (empty)
Component
Thank you for your help.
Sylvie
I have a Lightning Component and want to display a inside a VF page. I read that the solution is to use Iframe, but it is not working for me.
Result (empty)
Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
<fieldset class="slds-box slds-container--fluid">
<header class="slds-card__header slds-grid">
<div class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon__container slds-icon-standard-account">
<c:svg class="slds-icon" xlinkHref="/resource/SLDS202/assets/icons/custom-sprite/svg/symbols.svg#custom31" />
<span class="slds-assistive-text">Transaction Icon</span>
</span>
</div>
<div class="slds-media__body slds-truncate">
<h2><span class="slds-section__title" style="font-weight: bold;">Policies and Transactions</span></h2>
</div>
</div>
</header>
<iframe src="{!'https://ausurebroking--partials.cs57.visual.force.com/apex/PoliciesAndTransactions'}" width="100%" height="300px;" frameBorder="0"/>
</fieldset>
</aura:component>
What I am missing?Thank you for your help.
Sylvie
Unchecked - Enable clickjack protection for customer Visualforce pages with headers disabled and now the VF page displays in the iframe.
All Answers
The linked post(https://github.com/salesforcejeff/jargon/blob/master/articles/iFramecomponent.md) gives a wider tutorial, but the code you likely need is below. Note, here I have added record Id to my example as it is common that the VF page needs a reference to the record. Other parameters can be passed in a similar way.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global"> <iframe src="{! 'https://my-demo--c.eu11.visual.force.com/apex/MyVisualforcePage?Id=' + v.recordId }" width="100%" height="500px;" frameBorder="0"/> </aura:component>Please let us know if this helps.Mark this as solved if the information helps.
Thanks,
Nagendra
I have changed my code a bit to retrieve the recordId with force:recordData. It works outside the Iframe but not inside. The VF page does still not display.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global"> <aura:attribute name="account" type="Object"/> <aura:attribute name="simpleAccount" type="Object"/> <force:recordData aura:id="accountRecordLoader" recordId="{!v.recordId}" layoutType="FULL" targetRecord="{!v.account}" targetFields="{!v.simpleAccount}" /> <fieldset class="slds-box slds-container--fluid"> <header class="slds-card__header slds-grid"> <div class="slds-media slds-media--center slds-has-flexi-truncate"> <div class="slds-media__figure"> <span class="slds-icon__container slds-icon-standard-account"> <c:svg class="slds-icon" xlinkHref="/resource/SLDS202/assets/icons/custom-sprite/svg/symbols.svg#custom31" /> <span class="slds-assistive-text">Transaction Icon</span> </span> </div> <div class="slds-media__body slds-truncate"> <h2><span class="slds-section__title" style="font-weight: bold;">Policies and Transactions</span></h2> </div> </div> </header> <p class="slds-text-heading--label">{!v.recordId}</p> <p class="slds-text-heading--label">{!v.simpleAccount.Id}</p> <p class="slds-text-heading--label">{!v.simpleAccount.Name}</p> <iframe src="{!'https://ausurebroking--partials.cs57.visual.force.com/apex/NestedQueryPolicy?Id='+ v.recordId }" width="100%" height="300px;" frameBorder="0"/> </fieldset> </aura:component>Result
I also tried to replace 'v.recordId' by 'v.simpleAccount.Id' without success.
<iframe src="{!'https://ausurebroking--partials.cs57.visual.force.com/apex/NestedQueryPolicy?Id= '+ v.simpleAccount.Id }" width="100%" height="300px;" frameBorder="0"/>However when I copy the address in my browser the VF page is displaying. (https://ausurebroking--partials.cs57.visual.force.com/apex/NestedQueryPolicy?Id=0012800000EgzVwAAJ).
Any Idea? Thanks.
Sylvie
Unchecked - Enable clickjack protection for customer Visualforce pages with headers disabled and now the VF page displays in the iframe.
I need to display Iframe in my lightning component.
This is my component:
<aura:component controller="LeadCollectorController"> <aura:attribute name="theLead" type="Lead" default="{ 'sobjectType': 'Lead', 'Rating__c': 2, 'Company': '', 'FirstName': '', 'LastName': '', 'Email': '' }"/> <form> <fieldset class="slds-box slds-container--fluid"> <ui:inputText value="{!v.theLead.Company}" label="Company" class="input"/> <ui:inputText value="{!v.theLead.FirstName}" label="First" class="input"/> <ui:inputText value="{!v.theLead.LastName}" label="Last" class="input" /> <ui:inputEmail value="{!v.theLead.Email}" label="Email" class="input" /> <ui:button label="Save" press="{!c.save}"/> </fieldset> </form> <iframe src="{!'https://maps.google.it/'}" width="100%" height="300px;" frameBorder="0"/> </aura:component>This is the App:
<aura:application access="GLOBAL" extends="ltng:outApp"> <aura:dependency resource="c:leadCollector"/> </aura:application>This is the VFP:
<apex:page standardController="Lead" showHeader="false"> <apex:includeScript value="/lightning/lightning.out.js" /> <script> $Lightning.use("c:leadCollectionApp", function() { $Lightning.createComponent( "c:leadCollector", {}, "theLead", function(cmp) { console.log("Component created!"); console.log(cmp); }); }); </script> <div id="theLead"></div> </apex:page>When I load the page I can see only the form but not the Iframe.
I have tried also to include the Iframe directly in my VFP adding the code:
<apex:pageBlock > <apex:iframe src="https://www.salesforce.com" scrolling="true" id="theIframe"/> </apex:pageBlock>but it does not work!
Can you help me please?
Thanks!
Michele.
Was it for a logged in user? I have the similar requirement but for a community public page. iframe seems to work when I am logged in but for community guest user I get this error "Refused to display <apex page> in a frame because it set 'X-Frame-Options' to 'deny'".
Thanks!
Navita
Did you check that the VF page is enabled for your Community profile?
Sylvie
Is it necessary to disable the session setting : "Enable clickjack protection for customer Visualforce pages with headers disabled"
This settings comes under High Security Risks of Health Check and by doing this we are compromising with security of our org.
Is there any workaround for this ? or SF Latest release has already fixed such issues ?
There is another way of displaying a vf page on experience site. I had a similar requirement and I had followed the steps mentioned in the following url : Use Visualforce in Experience Builder Sites (https://help.salesforce.com/s/articleView?id=sf.community_builder_use_visualforce.htm&type=5). There is no need to disable the session setting : "Enable clickjack protection for customer Visualforce pages with headers disabled" for this.
Hope it will be useful for someone.