OpenSubtab throws error when embedding a VF page in lightning component

Question

Javascript on VF page:

    function openInSubtab(asd, asdf) {
            sforce.console.getEnclosingPrimaryTabId(function (r) {
                callBackopenTab(r, asd, asdf);
            });
    }

    function callBackopenTab(r, asd, asdf) {
        console.log('rId : ' + r.id);
        console.log('asd: ' + asd);
        console.log('asdf: ' + asdf);
        sforce.console.openSubtab(r.id, '/' + asd, true, asdf, null);
    }

VF page link:

<a href="javascript:void(0);"openInSubtab('{!asd', '{!asdf');return false;">{!asd}</a>

This works fine when its a VF page and we include this into a flexipage. Now I have embedded this VF page in a lightning component via an iframe.

<iframe id="componentName" src="/apex/VFPAGENAME" width="100%"
        height="100%" frameBorder="0"/>

Now when I click the link, it throws:

Uncaught DOMException: Blocked a frame with origin "https://******.my.salesforce.com" from accessing a cross-origin frame.
at Object.handleOnload (https://******/support/console/xdomain/30.0/iframeinterface.js:1:356)
at window.onload (https://******/support/console/xdomain/30.0/crossDomainProxy.html:4:89)

and does not open anything in subtab.

UPDATE

I suspect the reason could be that my console app is opened in lightning experience, thus the url in address bar has lightning in it, where as window.location.href still gives me base url of my org, so it may be a same origin policy, but still dont know how to resolve it.

Answer 1

I found a way to do it.

VF page:

<a href="javascript:void(0);"
   onClick="openCustomSubtab('asdf', 'asdfg');return false;">OpenSubtab</a>

Javascript :

function openCustomSubtab(id, tabName) {

    var response = {
        destinationID: "destId",
        paramObject: {
            id: id,
            tabName: tabName
        }
    };
    parent.postMessage(JSON.stringify(response), '*');

}

Then listen to this message in my controller of the lightning component where my VF page is embedded.

doInit: function (component) {
    var listener = function (event) {

        if (event !== null && event.data !== null && typeof event.data === 'string') {
            try {
                var eventResponse = JSON.parse(event.data);
                if (eventResponse.destinationID !== '' && eventResponse.destinationID === 'destId'){
                    var someTest = setInterval(function () {
                        var idContact = component.get("v.recordId");
                        var workspaceapi = component.find("workspace");
                        workspaceapi.openTab({
                            url: '/lightning/r/Contact/' +idContact +'/view' ,
                            focus: true
                        }).then(function(res) {
                            workspaceapi.openSubtab({
                                parentTabId: res,
                                url: '/lightning/n/TestAppPage',
                                focus: true
                            });
                        });
                        clearInterval(someTest);
                    }, 1);
                }
            } catch (err) {
                console.error(err);
            }
        }
    }
    window.addEventListener("message", listener);
}

From here I am opening a subtab. This works fine.

UPDATE For opening subtab: Its better if we write like this :

if (workspaceapi) {
    workspaceapi.getFocusedTabInfo().then(function(response) {
        var focusedTabId = response.tabId;
        workspaceapi.openSubtab({
            tabId: focusedTabId,
            url: '/lightning/n/TestAppPage'
        });
    }).catch(function(error) {
        console.log(error);
    });
}