Apex Code Development You need to sign in to do that
Don't have an account?
Kellymt Receiving a window.postMessage even from Lightning component
I have a lightning component which invokes a third party popup window as a lightbox. The window is served from another domain.
I would like for when that thrid party window closes to call a JavaScript method in my Lightning component to receive some data.
The best way I found to pass the results is via window.postMessage because the thirda party window and the lightning components are from different domains.
The quiestion I have is how to receid that postMessage even from my Lightning component.
I tried adding the below method to my Lighting component's controller but it did not work:
doInit : function(component, event, helper) {
var listener = function(event) {
//Do work here
}
if (addEventListener){
addEventListener("message", listener, false);
} else {
attachEvent("onmessage", listener);
}
},
Could you please help me figure this out.
I would like for when that thrid party window closes to call a JavaScript method in my Lightning component to receive some data.
The best way I found to pass the results is via window.postMessage because the thirda party window and the lightning components are from different domains.
The quiestion I have is how to receid that postMessage even from my Lightning component.
I tried adding the below method to my Lighting component's controller but it did not work:
doInit : function(component, event, helper) {
var listener = function(event) {
//Do work here
}
if (addEventListener){
addEventListener("message", listener, false);
} else {
attachEvent("onmessage", listener);
}
},
Could you please help me figure this out.
First Half: The third party popup should support sending message back to your window/script. Ideally if you are using a third party tool, they should provide you a hook/callback function or other API to enable/register this.
Second Half: You have to register your script to listen to "message". The idea is that the third party tool will send you a message indicating that dialog is closed and you can take actions accordingly. Documentation here (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
Do note: I am assuming that by "window" you are referring to an actual browser popup/new dialog.
If the third party does not offer a hook/callback to achieve this then you could try the following:
1. Create a helper VF page that will inturn launch the third-party script/page inside an iframe. Design this helper VF page to send message back to your source page which can process the message.
2. Invoke your helper VF page from your source page instead of the actual third party URL that resides outside your domain.
3. In your helper VF write scripts to listen to window closed event, and if detected, use "window.postMessage" to send the event to your source/origin page.
Hope this helps.
I do know how postMessage works and I do control the third party (maybe that meks it not a third party) application thus it is sending the message and I tested it with Visualforce.
The piece I do not know is how to register to receive the post message from within my LIighting component because registering in the controller in the doInit method with the code I pasted above did not work.
doInit : function(component, event, helper) { var listener = function(event) { //Do work here } if(window.addEventListener !== undefined) { window.addEventListener("message", listener, false); } else { attachEvent("onmessage", listener); } }but still no luck. In fact that was the original code I tried it with ( I should have probably said that in my original question).
Do you have other ides?
Hey Kellymt,
Did you ever find a resolution to this? I'm in a similar situation and I can't figure it out.
Thanks!
The controller's init method is called before all the DOM elements have been inserted into the component, and I've noticed that it may hide some implicit elements like window. See rendering lifecycle documentation (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_lifecycle.htm).
Here's example code (https://github.com/DouglasCAyers/sfdc-lightning-data-tables-component/blob/master/src/aura/DataTableCmp/DataTableCmpRenderer.js) where I added event listener for "onscroll". I did this in the renderer resource of my component.
({ afterRender : function( component, helper ) { this.superAfterRender(); // this is done in renderer because we don't get // access to the window element in the helper js window.onscroll = function() { // do something }; } })