Lightning Component:
<!--SampleComponent.cmp--> <aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global"> <!--Declare Attributes--> <aura:attribute name="vfMsgMethod" type="object" description="this attribute is for visualforce page javascript method"/> <!--Component Start--> <div class="slds-m-around_xx-large"> <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.doAction}"/> </div> <!--Component End--> </aura:component>
Lightning Controller:
({ doAction : function(component, event, helper) { var msg = 'Welcome to Salesforce Ohana'; var msgMethod = component.get("v.vfMsgMethod"); msgMethod(msg, function(){ //handle callback }); } })
Lightning App:
<!--SampleApp.app--> <aura:application extends="ltng:outApp" access="global"> <!--Lightning component--> <aura:dependency resource="c:SampleComponent"/> </aura:application>
Visualforce Page:
<apex:page sidebar="false" showHeader="false"> <apex:includeLightning /> <!--Lightning Container--> <div style="width:100%;height:100px;" id="LightningContainer"/> <script type="text/javascript"> //Create Lightning Component $Lightning.use("c:SampleApp", function() { $Lightning.createComponent("c:SampleComponent", { vfMsgMethod : getMessage, //Method to call from lightning component },"LightningContainer", function(component) { console.log('Component created'); }); }); //Function to call from Lightning Component function getMessage(welcomeMsg){ alert(welcomeMsg); } </script> </apex:page>