VF with long:out within SImpleDialog iFrame in classic console - Cant close or refresh tab

Question

I have some legacy code that works everywhere except it is now broken in Salesforce Classic Sales Console.

The code is executed from a javascript button that put the content of a VF page within an iframe

Button code

{!REQUIRESCRIPT("/soap/ajax/38.0/apex.js")} {!REQUIRESCRIPT("/soap/ajax/38.0/connection.js")}     


var sd;
var iframesize;
var isscroll;
if (document.documentElement.clientHeight > 833) {
    iframesize = 833;
    isscroll = "no";
} else {
    iframesize = document.documentElement.clientHeight - 100;
    isscroll = "yes";
}

function createDialog() {
    sd = new SimpleDialog("Dialog", true);    
    sd.setWidth(655);
    sd.setTitle('<h2 id="title">Payment Console</h2>');
    sd.createDialog();
    window.parent.sd = sd;
    document.body.setAttribute("style", "overflow: hidden;");
    var iframe_url = '{!URLFOR("/apex/THEVFPAGE", null, [id = Account.Id ,accId = Account.Id])}';
    sd.setContentInnerHTML('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="' + iframesize + '" width="630" marginheight="0" marginwidth="0" align="center" scrolling="' + isscroll + '" style="overflow-y: hidden !important; overflow-x: hidden !important;" />');
}

function setElements() {
    try {
        document.getElementById("DialogContent").style.overflowY = "hidden";
        document.getElementById("DialogContent").style.overflowX = "hidden";
        document.getElementsByClassName("bottomRight")[1].style.display = "none";
        document.getElementById("Dialog").style.overflow = "auto";
    } catch (e) {}
}

function showDialog() {
    if (window.parent.sd == undefined) {
        createDialog();
        sd.show();
    } else {
        window.parent.sd.show();
    }
    setElements();
}


showDialog();

From what I can tell this uses some legacy salesforce SimpleDialog javascript to place a modal window over the standard salesforce record page.

The Visualforce page uses lng:out to display a lightning component

Within that visualforce page I am capturing the force:navigateToURL event and I navigate to the standard record page

The problem

When in Salesforce Classic Console it will no longer let me redirect back to the standard record page as the code is currently....

VF Aura Handler (unimportant parts redacted)

$A.eventService.addHandler({
   event: 'force:navigateToURL',
   handler: function (event) {

   window.parent.location.href = '/{!$CurrentPage.parameters.id}';
});

I get the error:

[Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to '/0018A00000N9JdW'.]

I tried using the integration.js to get the enclosing tab etc but everything returns null from within the iframe.

Questions

How can I either refresh's the browser '/console' URL so the SimpleDialog is removed or is there another way I can either access the calling JS to execute a function or something to either refresh the current tab or window or close the dialog?

Basically I cannot find a way to close the SimpleDialog or refresh's the current console tab from within the iframe

Appreciate any insight, pointers, etc.

Answer 1

I was able to do it using postMessage. When I tried before I did not have the "*" as the domain parameter and that was blocking me.

I added this to the JS Button

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
    if( event.data === "close"){
        window.parent.sd = null; //Needed due to current code. Assignment to window.parent.sd in old code should probably be removed but....
        sd.cancel(); //Close
        location.reload(); //reload the tab
    }
}

Then on the VF page I simply do this:

window.parent.postMessage('close','*');