function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MICHELE RENDA 28MICHELE RENDA 28 

Iframe in VFP does not work

Hi,
I need to display Iframe in my lightning component.
This is one of  my components:
  
<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 height="400px" id="theIframe" name="theIframe" src="https://www.google.com/maps" width="80%" title ="prova"></iframe>
   
</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"  standardStylesheets="false" sidebar="false"  applyBodyTag="false" >
    <apex:includeScript value="/lightning/lightning.out.js" />
    <apex:includeLightning />

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"/>

    <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.
If I use Chrome or Firefox I see only a blank space.
If I use Internet Explorer I read the error in the screenshot.
User-added image
Can you help me please?
Thanks.
Michele renda

 
Scott Nelson SolutionistScott Nelson Solutionist
Hi Michele,

Lightning uses iFrames already, so the approach above will nest iFrame. I suggest you use Canvas: https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/sforce_api_console_canvas.htm

HTH
Scott S Nelson
MICHELE RENDA 28MICHELE RENDA 28
Hi Scott,
I'm sorry but I don't understand.
I read that Canvas is a framework that allow to integrate third part application within Salesforce but I need to embed Iframe with the approach above.
I want to avoid the error I have in debug: 

Refused to display 'https://www.google.com/maps' in a frame because it set 'X-Frame-Options' to 'sameorigin'

How can I do?
Thanks.
Michele Renda