Can you embed or implement a visualforce page inside of a lightning component?

For example I do a load of HTML, Javascript and angular and embedding inside a visualforce, then however with a lightning component implement the visualforce page inside of the lightning component?

So when I put the lightning component into the salesforce1 app - I can then see all the code for the visualforce page?


Yes you can. The linked post gives a wider tutorial, but the code you likely need is below. Note, here I have added recordId 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"/>

You can use iframe to expose your visualforce pages within a lightning component.

you can check out this link for more details:

UPDATED Link(thanks to @Trevor): https://github.com/salesforcejeff/jargon/blob/master/articles/iFramecomponent.md

I would recommend doing this only if you have an existing visualforce page that you want to reuse, but if you're starting from scratch might as well use a full lightning implementation.


If the iframe turns out blank it might be Salesforce's clickjack protection in settings.


You can temporary turn it off to test by going to Setup -> Session Settings -> Clickjack Protection.

Your Answer

