2

We have an flexipage/app which have 5 lightning components on it. Out of these 5, 3 are lightning component and 2 are visual force pages embedded inside lightning component.

I went through https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html and I am posting events and catching the events on the cards. This works perfectly when a single tab is opened on the lightning console app.

But when multiple tabs are opened with different data, the first tab reloads and posts the event window.postMessage(response, '*');. Now as it is posting events to the window the second tab also listens to the message and reloads the components as javascript code remains same.

Has anyone faced this issue till now?

Still did not find a solution for this. The issue is we can have multiple tabs and subtabs opened, and each tabs and subtabs are having same header components which posts the message, now as far as I know, lightning console does not generate different javascript from the component for each tab and subtab. it uses the same javascript every where, thus the given solution fails .

If there is a way to postMessage to a particular tab or subtab then it would be helpful.

  • Can't you generate an id for each 'session' of your javascript and in the listen method just filter whatever calls not directed to the specific ID? I've not looked in deep about your question, it was just a thought – Zeno Trevisan Feb 25 at 14:24
4
+25

This is an expected behaviour since postMessage with targetOrigin '*' sends the message with no target preference and your tabs are in the same lightning container.

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

What you can do is you can send the id of the data you are handling for each tab as part of the message and use it to decide if you want to do event handling or not.

There is an explanation about one-to-many communication here in One-to-One vs One-to-Many Messaging Scheme.

var message = {
   objectId: "your-object-id",
   payload: payload
 };
 window.postMessage(message, '*');

In receiving end:

if (event.data.objectId === "your-object-id") {
    // Handle the message
    console.log(event.data.payload);
}

Also it is a good idea to specify targetOrigin as using '*' is not safe depending on the data you are sending.

Documentation on postMessage

  • Is there a way to fire an event to a particular tab or subtab ? – Nagendra K S Feb 28 at 6:25
  • 1
    You can specify targetOrigin. To get the url of the tab in the console you can get developer.salesforce.com/docs/atlas.en-us.api_console.meta/… method – tugce Feb 28 at 6:31
  • I have tried the above solution but it fails when we have multiple salesforce lighting console tab opened. In multiple lightning console tab which has subtabs too, the same javascript is used for each tab, thus the object id wont work. Also the target origin, when we get the url of a specific tab and try to fire a post message to a visualforce embedded in lighting component it fails because of cross-origin. – Nagendra K S Apr 10 at 3:55

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.