Visualforce to Visualforce Lightning Component Communication - postMessage not received

Question

I have two visualforce page lightning components on a lightning page.

I am unable to get them to communicate, there are no logs to the console and no errors to report. The posted messages are not received by the components on the page.

BUT when I use inspect to place an event listener and console log on the top level, I see the message logged, and when I do postmessage from the context of the receiving vfFrame, messages are console logged from the original (receiving visualforce page) event listener.

Sending Visualforce Component:

<button onClick="parent.postMessage('Sent Message', 'https://myOrg--myBox--c.visualforce.com')">Send</button>

On the receiving Visualforce Page:

<script>
var sfOrigin = "https://myOrg--myBox.lightning.force.com";
window.addEventListener("message", function(event) {
    console.log(event);
    console.log(event.origin);
    if (event.origin !== sfOrigin) {
        // Not the expected origin: reject message!
        return;
    } 
    // Handle message
    console.log('received: ' + event.data);
    
}, false);
</script>

I have tried the following postMessage and event listener combinations:

 <button onClick="parent.postMessage('Sent Message', 'https://myOrg--myBox--c.visualforce.com')">Send</button>

 <button onClick="parent.postMessage('Sent Message', 'https://myOrg--myBox.lightning.force.com')">Send</button>

 <button onClick="parent.postMessage('Sent Message', '*')">Send</button>

 window.addEventListener("message", function(event) {

 parent.addEventListener("message", function(event) {

 window.parent.addEventListener("message", function(event) {

I have already referenced:

Communication between Lightning Component and Visualforce - DOMException

Lightning Web Component postMessage to iframe

https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html

Answer 1

The Page would need to listen to the message and redirect it to the other page. In other words, what you're trying to do won't work directly.

Things you can do:

Lightning Message Service

Until the release notes say so, you can't necessarily use this yet, but it's coming. When it goes GA, this would be the ideal technology to use.

Storage

You can use storage handlers to send data through localStorage or sessionStorage (preferred).

sforce.one

You can use publish/subscribe to send and receive messages, even across different tabs.

ServiceWorker

Service workers coordinate logic between multiple pages on the same domain by creating a "hidden" page in the background that's shared across all pages in that domain. This does not work in Lightning, but Visualforce does support this technology (sforce.one uses this model, I believe).