$A.get("e.force:navigateToURL") not firing in lightning out - Needs Alternative

Question

I have embedded the lightning component into my VF page. In the lightning component I am using $A.get("e.force:navigateToURL"); to navigate to a URL. Since I am calling the lightning component from VF page, the standard event is not getting fired. I understand this is a limitation currently. So I decided to use Windows.location for classic and urlEvent for lightning. Could someone explain to me how to identify the context and separate by if so that if I invoke the vf from classic the component logic calls windows.location URL else fires an URL event?

posted my code below

({
    doInit : function(component, event, helper) {
        var action = component.get("c.setUserDetails");
        var recId = component.get("v.recordId");
       // alert('xxxxxxxxxxxxxxx'+recId);
        action.setParams({
            "recId":recId
        });
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                component.set("v.BuildReport",response.getReturnValue());
                var bName = component.get("v.BuildReport.buildName");
                var rID = component.get("v.BuildReport.repId");
                let urltemp =window.location.protocol+'//'+window.location.host ;
                var repUrl = urltemp+'/'+'lightning'+'/'+'r'+'/'+'Report'+'/'+rID+'/'+'view'+'?'+'fv0'+'='+bName;
               // for lightning
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                    "url": repUrl
                });
                urlEvent.fire();
                //for classic
                window.parent.location.href = repUrl;
            }
            else{
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    }
})

Answer 1

I'm not aware of any way to officially check if you're using lightning.out, but there are plenty of options on how to accomplish that. My instinct would be to simply create an attribute on the outermost lightning component, and populate the attribute when you instantiate it in lightning.out.

    $Lightning.use("MyApp", function() {
        $Lightning.createComponent(
            "c:MyComponent",
            {
                recordId    : "{!$CurrentPage.parameters.recordId}",
                Environment : "Visualforce"
            },
            "lightning",
            function(cmp) { }
        );
    });

Then in MyComponent, you'd just define an "Environment" attribute to receive the above value:

<aura:attribute name="Environment" type="String" default="Lightning" description="Defines which environment in which this component is running. Can be 'Visualforce' or 'Lightning'" />