How to pass events between a custom Next Experience Page and a child iframe in UI Builder?

[John Lafer]

Hello, I'm building a custom page with UI Builder. It contains an external web application loading in an iframe that is rendered by my custom component. I need my page and the external app to exchange event messages. The only way I know how to do this is with Window.postMessage and Window.addEventListener. My plan was to make those calls from client scripts configured as event handlers. However, in UIB I can't find a way to get a reference to the 'window' global variable to access the window in the iframe. Any ideas would be most welcome. Is this possible in the Now Experience UI Framework?

Note: I control the code for the external web app so I can pursue alternative solutions if they exist. And I can access the 'window' global var in that application without any issues.

[Brad Tilton]

I'll admit I'm not familiar with the PostMessage API, but is there something preventing you from using that in your custom component?

[John Lafer]

Yes. The "postMessage" API is the one browsers provide to allow message-passing between a parent window (or browser tab) and a child window that has been iframed into the parent window. That API is actually a few methods on the Window global object, which apparently can't be accessed from a UIB client script.

[Bibin P M]

Hi John,

I am also looking for a solution to a similar case. Were you able to solve it?

Thanks

[John Lafer]

Hi Bibin,

I have not found a solution. My external app provides telephony and chat so I tried switching over to use the Ribbon component with an OpenFrame enabled. My external app is presented in the OpenFrame component. However, I encountered a similar problem to the one using iFrame - I can't figure out how to receive a custom message sent from the external app to an event-handler in the workspace page that contains the OpenFrame.

Regards.

[will_leingang]

Here's an example I put together a few years ago to do something similar. Using a UI action client script you can write something like this:

function onClick() {

    addEventListener("message", function(data){console.log("here is your data", data")});

    g_modal.showFrame("iframe_url_here");

}

and then from the iframe you can call top.postMessage("This is from the iframe"); to post data from the iframe to the outer window.