Is it possible to call a lightning method from vf page?

Question

I need to clear the value of custom lookup from visual force page using the cancel button. I am planing to call the clear method defined in controller of lighting component. But i don't know how to achieve it? Please suggest any way to achieve this.

VF page code to call the lightning component.

input type="hidden" id="reassignUserID" value="" />
                            <div id="customLookupCmpID" />
  $Lightning.use("c:CustomLookupApp", function() {
                                    var cLookup=$Lightning.createComponent("c:customLookup",
                                    {
                                        "objectAPIName" : "User",
                                        "IconName" : "standard:account",
                                        "selectedRecord" : "",
                                        "label" : ""
                                    },
                                    "customLookupCmpID",
                                     function(component) {
                                         $A.eventService.addHandler({ "event": "c:lightningAppExternalEvent", "handler" : handleCallBackfromCMP });
                                     });
                                });

 function handleCallBackfromCMP (event){
                                    // console.log(event.getParam('data'));
                                    if(event.getParam('data') == null) {
                                        document.getElementById("reassignUserID").value = null;
                                        document.getElementById("unassignSelectPickList").value = null;
                                        document.getElementById("unassignModalReason").value = null;
                                    } else {
                                        document.getElementById("reassignUserID").value = event.getParam('data').Id;
                                        document.getElementById("unassignSelectPickList").value = " Transfer";
                                        document.getElementById("unassignModalReason").value = "Transfer from to " + document.getElementById("userNameDisplay").value + " to " + event.getParam('data').Name;
                                        document.getElementById("unassignSelectPickList").disabled=true;
                                        document.getElementById("unassignModalReason").disabled=true;
                                        // console.log(event.getParam('data').Id);
                                    }
                                }

Answer 1

You can use window.postMessage to communicate between VF page and Aura component.

Make sure you add an origin check to avoid an unexpected result

VF page

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" >
    <apex:includeLightning />

    <div id="lightning"></div>
    <button onclick="fireEvent()">Click Me</button>

    <script>
        $Lightning.use("c:sampleApp", function() {
            $Lightning.createComponent("c:sampleCmp", {}, "lightning");
        });

        function fireEvent() {
            window.postMessage("Some Event data", "*");
        }
    </script>
</apex:page>

Aura Component Controller

({
    doInit : function(component, event, helper) {
        window.addEventListener("message", (event) => {
            helper.doSomething(component, event.data);
        });
    }
})