1

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

1 Answer 1

2

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).

2
  • You rock. Was not aware of sessionStorage and will work for this quick POC I need to work up. Based on the references I listed I assumed that posting a message to the parent of VF LTNG component somehow distributed that message to all components (including VF components) on that page.
    – S.B.
    Aug 25, 2020 at 19:54
  • 2
    LMS is already GA. See the Summer '20 release notes. There are limitations, of course.
    – Phil W
    Aug 25, 2020 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.